title: CSS - How to make footer stay at the bottom of the page?
body: <p>the layout here is a template for my website <a href="http://jsfiddle.net/QvFV8/12/" rel="nofollow">http://jsfiddle.net/QvFV8/12/</a> as you can see the content overflows the footer. </p>
  
  <p>It works fine for when there is only a small amount of content, which is what I want.
  I've tried clear both in the 1st footer section, but this has no effect</p>
  
  <p>How can the page be stretched so that the footer remains at the bottom, regardless of the amount of content (some pages will have more or less content then others)</p>
  
  <pre><code>&lt;body&gt; 
  &lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;div class="headerleft"&gt;
              &lt;div class="headerleftcon"&gt;leftcon&lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="headerright"&gt;
              &lt;div class="headerrightcon"&gt;rightcon&lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="header-content"&gt;Header
          &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="body"&gt;
          &lt;div class="left-sidebar"&gt;
              &lt;div class="left-content"&gt;left sidebar&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="right-sidebar"&gt;
              &lt;div class="right-content"&gt;right sidebar&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;Content 1
          &lt;div class="centerbox"&gt;
              &lt;div class="centerboxcontent"&gt;Center box &lt;br&gt;  &lt;/div&gt;
          &lt;/div&gt;Content 2 &lt;br&gt; Content 2 &lt;br&gt;Content 2 &lt;br&gt;Content 2 &lt;br&gt;Content 2  
          bla bla bla
          &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="footer"&gt;
          &lt;div class="footerleft"&gt;
              &lt;div class="footerleftcon"&gt;botleftcon&lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="footerright"&gt;
              &lt;div class="footerrightcon"&gt;botrightcon&lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="footer-content"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/body&gt; 
  </code></pre>
  
  <p>The css is as follows</p>
  
  <pre><code>html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;}
  .header, .footer{
  height: 80px;
  background-color: #EFEFEF;
  position: relative;}
  .header-content{
  padding: 20px;
  text-align: center;}
  .headerleft{
  height: 100%;
  background-color: red;
  width: 50px;
  float: left;}
  .headerleftcon{
  padding: 0px 0px 0px 0px;}
  .headerright{
  height: 100%;
  background-color: red;
  width: 50px;
  float: right;}
  .headerrightcon{
  padding: 0px 0px 0px 0px;}
  .footer-content{
  padding: 20px;
  text-align: center;}
  .container{
  height: 100%;}
  .body{
  height: 100%;
  margin-top: -80px;
  margin-bottom: -80px;
  background-color: #C7DFFA;} 
  .content{
  padding: 80px 0px 0px 0px;}
  .left-sidebar{
  height: 100%;
  background-color: gray;
  width: 50px;
  margin-top: -80px;
  margin-bottom: -80px;
  float: left;
  clear: both;} 
  .right-sidebar{
  height: 100%;
  background-color: gray;
  width: 50px;
  margin-top: -80px;
  margin-bottom: -80px;
  float: right;}
  .centerbox{
  height:100px;
  background-color: blue;}
  .centerboxcontent{
  padding:  0px 0px 0px 0px;} 
  .right-content{
  padding:  80px 0px 0px 0px;
  text-align: right;}
  .left-content{
  padding:  80px 0px 0px 0px;} 
  .footer{
     clear:both;}
  .footerleft{
  height: 100%;
  background-color: red;
  width: 50px;
  float: left;}
  .footerleftcon{
  padding: 0px 0px 0px 0px;}
  .footerright{
  height: 100%;
  background-color: red;
  width: 50px;
  float: right;}
  .footerrightcon{
  padding: 0px 0px 0px 0px;}
  </code></pre>