title: Keep footer at the bottom of the page (with scrolling if needed)
body: <p>I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.</p>
  
  <p>I'm trying to copy the following example: <a href="http://peterned.home.xs4all.nl/examples/csslayout1.html" rel="noreferrer">http://peterned.home.xs4all.nl/examples/csslayout1.html</a></p>
  
  <p>However when I use the following, the footer is showing halfway my long page for some reason.</p>
  
  <pre><code>position: absolute; bottom:0 
  </code></pre>
  
  <p>I have both short pages and long pages and I would like it to be at the bottom of both of them.</p>
  
  <p>How can I keep the footer at the bottom on a long page as well?</p>
  
  <p><strong>Fiddle</strong></p>
  
  <p>I've created these Fiddles to show the problem and test the code.
  Please post a working example with your solution.</p>
  
  <ul>
  <li><p><a href="http://jsfiddle.net/Dyna18/243x9s2o/" rel="noreferrer">Short page</a></p></li>
  <li><p><a href="http://jsfiddle.net/Dyna18/ozzuvrow/" rel="noreferrer">Long page</a></p></li>
  </ul>
  
  <p><strong>My footer css:</strong></p>
  
  <pre><code>html,body {
      margin:0;
      padding:0;
      height:100%; /* needed for container min-height */
  }
  
  .content {
      position:relative; /* needed for footer positioning*/
      margin:0 auto; /* center, not in IE5 */
  
      height:auto !important; /* real browsers */
      height:100%; /* IE6: treaded as min-height*/
  
      min-height:100%; /* real browsers */
  }
  
  /* --- Footer --- */
  .footerbar {                                position: absolute;
                                              width: 100%;
                                              bottom: 0;
  
                                              color: white;
                                              background-color: #202020;
                                              font-size: 12px; }
  
  a.nav-footer:link,
  a.nav-footer:visited {                      color: white !important; }
  a.nav-footer:hover, 
  a.nav-footer:focus {                        color: black !important;
                                              background-color: #E7E7E7 !important; }
  </code></pre>