title: 100% height div between header and footer
body: <p>I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer). </p>
  
  <p><strong>(<a href="http://jsfiddle.net/qC8z5/164/">See Example for a visual</a>)</strong> </p>
  
  <p>The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the <strong>(<a href="http://jsfiddle.net/qC8z5/164/">original example</a>)</strong> results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.</p>
  
  <p>And the Following CSS results in a gap between the content and the footer.</p>
  
  <pre><code>html,body{
     margin:0;
     padding:0;
     height:100%;
    background:yellow;
  }
  
  .wrap{
     min-height:100%;
     position:relative;
  }
  
  header{
    background:blue;
     padding:10px;  
  }
  
  #content{
    height:100%;
    width: 400px;
    margin:0 auto;
    background:orange;
      padding:30px;
  }
  footer{
    background:blue;
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
  }
  </code></pre>
  
  <p>How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?</p>
  
  <p>Thank you!</p>