Exploring the Sticky Footer
I thought I was done setting up my new blog theme when I noticed that something wasn’t right on my about page. Hmm…there’s a gap at the bottom of the page! The footer isn’t at the bottom – it’s crept up because there is not enough content to fill the browser window. See for yourself:
I’m using the free Titan theme, and I really like it. Only it has some footer problems.
How can I fix this?
- I could write more about me. Just kidding! More content is not going to fix anything – it’ll just cover up the problem for a while.
- I could set a minimum height for the content, so it is as long as the browser window. Nope. Browser window heights come in all sizes. The right height for one is wrong for another!
- I could use a sticky footer. Of course! A footer that sticks at the bottom of the page no matter what the browser height or how little content there is. Perfect!
How a Sticky Footer Works
There’s more than one way to make a footer stick, but I’ve found that Ryan Fait’s Sticky Footer is one of the best. It’s fairly simple, and it works! Just a few lines of CSS code and some HTML, and you’ll have that footer tamed in no time.
It can be a little confusing at first, though. I’m going walk you through each part so you know how and why it works.
The Basic Idea
- We are going to extend the content area to 100% of the browser window height, then put the footer below that. Yes, that will make the footer off the screen, and you would have to scroll down to see the footer.
- Now we’re going to pull the footer up into place, but first we need a space to put it. We add an extra “push” div the same height as the footer before we end the content div so that the footer will have it’s own place and never overlap the content.
- Finally we will set the negative bottom margin on the content that equals the height of the footer. This will draw the footer up into place at the bottom, like so.
The Code
Follow this structure in your HTML:
<html>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
All of your content except the footer needs to be in a wrapper div (You can name it whatever you like). I call mine sticky_footer_wrap so I know exactly what it’s there for. Make sure to include the “push” div at the very bottom of your content wrap, before you close it. If you don’t use it, your footer could overlap your content. Now add your footer div after the wrapper div. That’s it! Next is the css code.
Here is the CSS in full:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
.footer, .push {
height: 200px;
}
And here is the CSS code explained part by part:
* {
margin: 0;
}
This resets the margin to 0px on all elements. Often this is already included in a layout design, if you don’t have it in your stylesheet, then add it.
html, body {
height: 100%;
}
For the minimum height to work, all the parent elements of the wrapper div (html and body) must be set to 100% height.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
Here’s our content wrapper. We’re setting it’s min-height to 100%. The extra height rules are a necessary hack to work in IE 6. We’re using min-height because if we used only height, any content longer that that height would disappear! And we have our negative margin here: -200px is the bottom margin, while sides are auto margin and the top is 0. -200px is just an example size. Note: the negative margin must be the exact height of the footer. This means including any padding and borders. If you find that your footer is not quite up in place, check to see how much padding and borders are added and increase the negative margin by that amount.
.footer, .push {
height: 200px;
}
And last is the height for our footer and push div. Again, 200px is just an example – replace the footer height and the negative margin with your own measurements.
That’s the way it works! So get your HTML structure set up, add the CSS to your stylesheet, and try this out for yourself.
Happy coding!
~Hayley