title: How can I force my footer to stick to the bottom of any page in CSS?
body: <p>This is my code:</p>
  
  <pre><code>#footer {
     font-size: 10px;
     position:absolute;
     bottom:0;
     background:#ffffff;
  }
  </code></pre>
  
  <p>I've no idea what is wrong with this - can anyone help?</p>
  
  <p>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 &lt;= 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.</p>
  
  <p><strong>EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.</strong></p>