Web page footer stays at bottom of browser window

Question

I want my footer (on some pages) to stay fixed at the bottom of the browser window regardless of the height of the content. Like some toolbars that you see at the bottom of the browser window, on sites like www.facebook.com and meebo toolbars (like abduzeedo.com ).

I did a quick search and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility etc ... is there a good standard way to do this? Even with meebo and facebook, it seems that the toolbar might jump a bit when you scroll, while CSS solutions look very durable. Is there a simple CSS solution? I assume this is something like the footer has absolute bottom positioning: 0 ...

Answer 1

If you want something to lean against the bottom, you should use the css position fixed . This will find it at the bottom of the window.

"" , div . , .

HTML:

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

Css:

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

Answer 2

Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

Answer 3

Use absolute positioning in CSS.

http://jsfiddle.net/TMD9X/