title: Keeping footer visible and height 100% in CSS
body: <p>I'm trying to create a very simple page that contains a container, a header, a left column and a footer:</p>
  <pre><code>&lt;containter&gt;
  &lt;header /&gt;
  &lt;content /&gt;
  &lt;leftBar /&gt;
  &lt;footer /&gt;
  &lt;/containter&gt;
  </code></pre>
  <p>I want to use the 100% of the height, as I can do with the width, but I simply don<code>t get it work.At his moment I'm using </code>min-height<code>, but how could I use the </code>height:100%` ? What I like is that the footer is always visible, and you scroll the content.</p>
  <h3>Current CSS</h3>
  <pre><code>body
  {
      font-family: Verdana;
      font-size: 0.8em;
      background-color:#f1f1f1;
  }
  
  #container {
     border:solid 2px Black;
     position:absolute;
     left:10%;
     width:80%;
     margin:auto;
  }
  
  #header {
    height:20px;
    background: #DDDDDD;
  }
  
  #leftBar {
    width: 20%; 
    background: #669966; 
    min-height:600px;
    postion:absolute;
    top:20px;
    bottom:20px;
  }
  
  #content {
    float:right;
    background-color: #cdcde6;
    position:absolute;
    left:20%;
    right:0px;
    bottom:20px;
    top:20px;
    padding:5px;
  }
  
  #footer {
   position:absolute;
   height:20px;
  }
  </code></pre>