Posts Tagged ‘sticky footer’

Attaching a footer to the bottom of the page but stays below scrolling content

Saturday, October 11th, 2008

I see a lot of people ask about how to create a sticky footer on forums. I usually just leave a link to Ryan Fait’s Sticky Footer. It works great in all the browsers I have tested it in. You should check out his site, you may learn something, or at least you’ll see a different point of view. I just looked at his ID’s vs. Classes post and I don’t 100% agree with him because he basically just uses classes, no IDs. It may work for him, but in regards to specificity and CSS, it probably isn’t best practice to not use IDs. Everyone works differently, it’s kind of a way of adding our fingerprints to the websites we make, patterns in our coding. But that’s another post another time.

Here is the run down on how to use this sticky CSS footer.

The CSS html, body {height: 100%; padding: 0; margin: 0;} .wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px;} .footer, .push {height: 150px;}

The HTML <body> <div class=”wrapper”> Your page content <div class=”push”></div> </div><!–end wrapper–> <div class=”footer”> Your footer content </div><!–end footer–> </body> </html>

Things to keep in mind: You add the push class before you close your wrapper, the footer comes in after you close the wrapper class. The 100% height on HTML is necessary, even though you’re putting it on the body tag as well, so are all of the height declarations on the wrapper class.

Tags: , ,
Posted in CSS | 4 Comments »