What does this do?
This makes your footer stick at the bottom of the page, even if you have little content on the page. This is useful, but of course there are some jQuery alternatives which will be posted in a similar post later on. It’s a very simple, clean, CSS based only solution that works in 90%+ of the cases. Also this works in IE6.
The other solution is 10 times simpler but does not work in Internet Explorer 6. More details below…
The wrapper div must enclose the page content. And the push div must be the last line in the content area
The only limitations are that you need to know exactly the footer height and the footer must have over 80px; it doesnt work with less than that, i dont know why, but thats the way it is
The wrapper CSS for
height again is because of a bug in IE6 important declaration, and since every other browser supports the proper important declaration, basically every browser will have it’s height set as auto, while IE6 will be bugged into making sure it has the
min-height solution implemented correctly. I dont know the inner workings but after testing this seems to work
Another thing to keep in mind is that the
div.push height’s must be a bit bigger so you have to tweak the values to suit your design
Also another thing, dont use margin top on your wrapper since it will break this, and if it still breaks afterwards, just add paddings on the
This is the only clean solution to get the footer to stick at the bottom of the page, using CSS only, there are also some jQuery alternatives i’ll look into and post here in a few days.
The second method takes advantage of the
position: fixed; in CSS 2.1 however this method only works in IE7+, because IE6 doesnt understand
position: fixed; native, however we have a small trick to do
position: fixed; in IE6 found here. You can combine them if you wish.
For all the other browsers, add to the element you wish positioned fixed the CSS, and then hack for IE6 if you wish to support that crappy browser.
Questions in comments. Will answer as they come.