/* Set the 100% page height */
html, body {
height: 100%;
}
#shell {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -40px;/* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 40px; /* .push must be the same height as #footer */
}
/* The .push DIV should sit just before the closing tag to the wrapper DIV that holds everything else, I call mine "shell".
The footer DIV has to sit below the wrapper DIV, not in it but below it.
Example:
Set the push and footer DIVs to the same height. the shell will stretch 100% of the window, with the push.
The negative marginning will pull the empty push DIV back up and stick the footer, without the need to scroll.
It might not even need the "push".
The {height: auto !important; and height: 100%;} in the wrapper selector is a min-height hack for IE, so if you want the footer to stick to the bottom of the page in Internet Explorer 6, don't remove it!