Lucid Green

UPDATE 5/30/2009: My original solution didn’t work as expected, but, as usual, someone else had already solved the problem. The solution code example below is modified from http://ryanfait.com/sticky-footer/.

Caveat, this fix has been tested in Firefox 3+, Safari 4beta, and IE8. It should work in other standards compliant browsers.

Assume for a moment you want the following simple page layout:

Header, height: 200px

Content, height: 100% of available space

Footer, height: 30px

You want the footer to always be at the bottom of the browser window, but also drop below the bottom of the browser window if the content extends below it.

You might be tempted to achieve this layout with the following code:

HTML
<div  id="header">Header</div>
<div  id="content">content</div>
<div  id="footer">footer</div>

CSS
html,body {height:100%} /* you need this to allow for 100% on any other elements */
#header {height:200px;}
#content {height:100%;}
#footer {height:30px;}

this works great if your content is longer than then the browser window is high, you footer will always be below your content, and you will have to scroll down to see it as you would expect. But what if your content is significantly shorter than the browser window is high?

If you try this you will quickly discover that no matter how small or large you make your browser window the footer will always be below the visible edge of the page and you will have to use the scrollbar to see it. The container div is not taking up 100% of the available height, but 100% of the window height. In other words, if your browser window is 800 px high then your container div will be 800px high, and then your 200px header and 30px footer will be added on to this making the entire page 1030 px high.

So how do you avoid this?

Fairly easily as it turns out. Do the following:

HTML
<div id="container">
<div  id="header">Header</div>
<div  id="content">content</div>
<div id="push"></div>
</div>
<div  id="footer">footer</div>

CSS
* {margin:0; padding:0;} /*required to remove default padding and margins */
html,body {height:100%} /* you need this to allow for 100% on any other elements */
#container {height:100%; margin-bottom:-30px; min-height: 100%; height: auto !important;}
#header {height:200px;}
#footer, #push {height:30px;} /*push must be exactly the same height as footer to prevent the footer from covering up or going under content when the window is smaller than the content*/