Enforcing a minimum height for block elements in HTML is one of those few CSS tricks that you can't live without. There are still enough folks using IE6, unfortunately, and it doesn't support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser-conditional style sheets to get the desired effect.
/*
STICKER - A valid, easy to use CSS sticky footer by Ryan Fait
This is the basic CSS you need along with the one extra empty
div and the wrapper required to achieve the effect. I suggest
that you leave the * { margin: 0; } code in while testing and
building your site because margins do have a tendency to mess
things up a bit. Have fun!
Copyright (c) 2006-2007 Ryan Fait
*/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 4em; /* .push must be the same height as .footer */
}
/*
TROUBLESHOOTING
I've received a few comments about vertical margins causing a
few problems with the layout. If you want space between
paragraphs or headers, use padding instead of margin. It's as
simple as that.
*/