Webpage footer remains on bottom of browser window

I want my footer (on some pages) to remain fixed to the bottom of the browser window regardless of the height of the content. Similar to some of the toolbars you see fixed on the bottom of the browser window on sites like www.facebook.com and the meebo toolbar (e.g. abduzeedo.com).

I did some quick searching and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility, etc... is there a good standard way of doing this? Even with meebo and faceb开发者_C百科ook, it seems like the toolbar can kind of jump a little as you scroll whereas the CSS solutions look very solid. Is there a simple CSS solution? I assume it's something along the lines of making the footer have absolute positioning with bottom: 0...

If you want something to "stick" to the bottom, you should use the css fixed position. This will locate it to the bottom of the window.

Using "absolute" will not be correct, because it will located the div relative to the first non-static element. Most of the time this is the window, but that doesn't have to be the case.

Html code:

<div class="bottom"><h1>Add to bottom</h1></div>

Css code:

div.bottom {
    position:fixed;
    bottom:0px;
    height:200px;
    left:0px;
    right:0px;
    border:solid 4px red;
}

There is a very good tutorial from a guy called Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

Use absolute positioning in CSS.

http://jsfiddle.net/TMD9X/