title: 100% height with margin and dynamic content
body: <p>My project has the following requirements:</p>
  
  <ol>
  <li>Header fixed to the top of the page</li>
  <li>Content area has a white background and 100% height</li>
  <li>No scroll bar when content is less than height of the screen</li>
  <li>Must support IE7+ (a JS fix for IE is ok)</li>
  <li>When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).</li>
  </ol>
  
  <p>Here is my basic HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div id="header"&gt;header&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrap" id="content"&gt;content&lt;/div&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
  html,body{height:100%;}
  .wrap{width:300px; margin:0 auto;}
  #header{position:fixed; background:#aaa; top:10px; width:300px;}
  #content{height:100%; background:white; margin-top:40px}
  </code></pre>
  
  <p>​
  Example: <a href="http://jsfiddle.net/zw3WS/" rel="nofollow">http://jsfiddle.net/zw3WS/</a></p>
  
  <p>First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?</p>
  
  <p>Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?</p>