CSS Tip: Extend your site's footer to the bottom of the page

| 2012-01-12

The problem with creating a footer with an image background on a web page is that when the page is shallow or the visitor is using a high resolution monitor the footer image does not extend to the bottom of the page.

This happens because there’s no way in CSS to know the space between the top of the footer and the bottom of the window, otherwise we’d be able to scale the footer area’s height to compensate.

Instead we can apply the fix with this code:

html, body{
    height: 100%
}
.site-container{
    overflow: hidden;
    min-height: 100%;
    min-width: 960px;
}
.footer{
    padding-bottom: 32000px;
    margin-bottom: -32000px;
}

We are adding a large padding to the bottom of the footer to extend the background, then we bring up the bottom margin by using a negative value so the DIV’s space effectively ends where it did before the padding relative to the DOM elements around it.

The site-container has an overflow to hide the overflowing footer padding and stop the vertical scrollbars. However to stop the container cropping too far up the page we set it’s min-height to be 100% so the earliest the footer will be cropped is the bottom of the window unless the content is larger than the window size.

In CSS you can’t normally use 100% for a min-height (or height) so to fix this you need to add a 100% height to the html and body element. This quirky code will fix that for you.

It’s worth noting that I’ve also added a min-width to the site-container, this should be your site’s width. It will ensure that we still get horizontal scrollbars when we scale down the browser while we have the ‘overflow: hidden’ set.