CSS is a sticky subject in the best of times and to make it more sticky I thought I’d run down the techniques needed to make a sticky footer that works in all modern browsers. This is unlike most examples on the web that break in either Opera, IE8, IE7 or indeed in all three.
Try any of those footers from the Google search above in IE8 or Opera (some don’t work in IE7 either). Load the page then grab the bottom of the window (not the side or corner of the window) and drag it up or down and you will see that the footer usually sticks in the wrong place, messing up the display.
Now try it on my old original sticky footer version (circa 2003 which pre-dates all those above) and you will see that my version is working in all browsers including IE8.
Before we get into details I should first explain what a sticky footer is.
A sticky footer is one that sits at the bottom of the viewport when there is not enough content in the page to push the footer down. If there is a lot of content then the footer sits at the bottom of the document and will be below the fold as usual. Why this is desirable is because on short content pages you won’t have a footer right at the top of the screen looking very strange indeed as shown from Figure 1 below.
Figure 1 – normal footer close to content.
Figure 2 – Sticky footer at bottom of viewport.
Note that a “fixed positioned” footer is not the same thing as a sticky footer as a fixed positioned footer is one that sits at the bottom of the viewport at all times and never moves. Don’t get confused between the two.
Before we get into the nitty gritty detail I will briefly explain the concept in getting a sticky footer to work.
The first thing we need to do is create a 100% high container which is achieved by setting the html and body elements to 100% height and then creating a container that is a minimum of 100% high. The footer is then placed after this container which means it will be invisible as it will be below the fold of the page but by the magic of negative margins we can bring it back into view at the bottom of the viewport.
Of course this means that the sticky footer must be a fixed height (pixels or ems will do) so that we know how to accommodate it with the exact negative margins that bring it into view. This also means that our footer is now overlapping content on the page so we will also need to protect this content with either padding on an inner element, or some other similar approach as you will see when we get into specifics later.
That’s basically all there is to it except that we have to squash a few bugs on the way to make it work everywhere.