Extend color of the bg of the footer to the bottom of the page.

Maybe u could either add a height value to the CSS for the footer e.g footer{height:300px;} or increase or add padding to the bottom of the footer, just enough to take the background to the bottom of the page.

well, all the pages are different height… and then there would be unnecessary vertical scrolling…

Can you provide a link to a page where this happens? As you say, the height is variable and also depends on the users browser window, so it may not be possible, but with a link someone can look at it.

Sorry, the site is still in under construction/maintenance mode.

Can you provide your HTML and CSS code for the problematic webpage, using PasteBin? Then send us a link to those PasteBin pages.

height: 100% for your body main or the footer does not do anything…

100% means 100% of the content in that element — it’s not related to the window size.

https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

In the example (link) the footer is pushed to the bottom of the screen, I would like to figure out how to extend it’s color to the bottom of the browser window thought.

You might be able to add a “dummy” element that is the same color as the footer (and thus invisible as a separate element) and use the CSS code in the above linked article to put that at the bottom of the page.

Interesting idea, I’ll give it a try.

If that doesn’t work, we really need either a link to your website (local servers can be made online) or your HTML and CSS code. Otherwise it’s difficult to resolve a hypothetical issue.