How can I force my footer to stick to the bottom of any page in CSS?

Question

This is my code:

#footer {    font-size: 10px;    position:absolute;    bottom:0;    background:#ffffff; } 

I've no idea what is wrong with this - can anyone help?

EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.

EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.

Answer 1

You're probably looking for this example:

<div class="wrapper">     Your content here     <div class="push"></div> </div> <div class="footer">     Your footer here </div> 

CSS:

For a 142-pixel footer

html, body {     height: 100%; } .wrapper {     min-height: 100%;     height: auto !important;     height: 100%;     margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push {     height: 142px; /* .push must be the same height as .footer */ }  /*  Sticky Footer by Ryan Fait http://ryanfait.com/  */ 

Answer 2

Try this:

position: fixed;   bottom: 0;