Use pure CSS to create “sticky” footers on a web page
Our objective is simple: Make the footer of our web page stay at the bottom even if the page’s content area is shorter than the user’s browser window.
This, by far, is one of our favorite things to do. It makes the web layout so much more appealing and creates a very professional feel. We ended up kicking ourselves the very first time we tried to add this functionality to a project early on when we found out just how easy it was. We take solace in knowing that we’re not alone, though—a quick search for “footer stick bottom” still yields quite a few results from fellow developers wrestling with the same frustrating experience.
If you’re in that boat, fear no more! We’re going to get your footers in shape in a snap. Here’s a diagram of the problem:
Unfortunately, many people try to handle it by setting a fixed height to the content, pushing the footer down. This may work when you view it, but there are several different browser window heights, resolutions, and variables that make this an extremely unreliable solution (notice the emphasis on the word “extremely”—this basically means “don’t do it”). We need a dynamic solution that’s able to adapt on the fly to the height of a user’s browser window, no matter if you resize it, have Firebug open, use a unique resolution, or just have a really, really weird browser!
Let’s take a look at what the end results should look like:
To make this happen, let’s get our HTML structure in place first:
It’s pretty simple so far. Just a skeleton of a web page. The
"page" div contains all of the pieces of our HTML page – except the footer. The
"header" div is going to be our top content. The
"main" div will include all our content for the page. The
"footer" div is our copyrights and footer links. Let’s start by coding the CSS for the full page:
Nothing too special here. We start by making the HTML page itself the full width and height of the window. We then have our header and footer be a fixed height (40px), center the text in each and make them the full width of the page. We then finally set two different colors for each – pink for the header and a shade of green for the footer.
The resulting page should look something like this:
Notice that the footer isn’t at the bottom of the page yet – the above image shows that when the window is larger than what the page needs there’s a lot of blank space under the footer. Also, if we were to shrink the window, vertically, then the footer would scroll off the bottom of the page. We can fix this by making two changes, first add these css rules to the “#footer” css section:
The first rule “position: fixed” tells the browser that the “footer” should be position at a static/fixed location on the page. The second rule “bottom: 0px” tells it that we want the bottom of the “footer” to be zero pixels from the bottom of the window – in other words, always at the bottom of the window.
Second, add new new “#page” css section:
This section will tell the browser that the “page” div should have 40 pixels of extra space at the bottom. This is critical. It’s 40px because that’s the height we assigned to our footer, which means that none of the text in the “main” div will be hidden by the “footer” div.
And that’s it. When we look at the result we’ll see that when the window is too small and we need a scroll bar it should appear like this:
And when the window is larger than what we need, it should look like this:
Notice that in both cases the footer remains fixed to the bottom of the window.
One of the best things about this little trick is that it’s compliant with all major browsers—including Firefox, Chrome, Safari, and Internet Explorer
We can’t finish this blog without mentioning our favorite perk of this trick: Should you not have a specially-designed mobile version of your site, this trick even works on smart phones!