My background color seaps to the bottom of the page, and I want my footer color to fill the bottom when not scrolling

Here's an example... https://i.sstatic.net/Onfxk.jpg

There is not a lot of content on the page, so it's height is small. The body BG color fills the bottom of the page even past the footer - which ends up looking ridiculous...

How can I make that footer color finish out the page when the content is small (no scroll bar on the user's screen)? I don't want to make a huge footer permanently for every page, because that would share in the ridiculousness.

Thanks.

Solution

I would give the body and the footer the same background color, then apply your "body" background color to a wrapper element immediately within the body itself.

<!DOCTYPE html>
<html>
  <head>
    <title>Alternative Background Method</title>
    <style>
      body, 
      body > footer {
        background: /* bgcolor */
      }
      #content {
        background: /* original body background color */
      }
    </style>
  </head>
  <body>
    <section id="content">
      <!-- main content --->
    </section>
    <footer>
      <!-- footer contents -->
    </footer>
    <!--

      Any visible space between the bottom of the viewport and the 
      footer element will have the same background as the footer
      element itself.

    -->
  </body>
</html>