title: Child divs fails to get 100% height
body: <p>I am trying to make a container 100% of my body height and then i want to have a header and textarea blocks with 10% and 90% of that height.</p>
  
  <p>Here is a fiddle of my results and my code: <a href="http://jsfiddle.net/muhyee/3hAqS/" rel="nofollow">JSFiddle</a></p>
  
  <p>Notice that header only appears because of padding.</p>
  
  <p>Also in my chrome explorer container doesn't get the 100% height of the body as the fiddle above.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;&lt;/div&gt;
      &lt;textarea autofocus id="textarea"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
      height: 100%;
  }
  #container {
      min-width: 240px;
      min-height: 100%;
  }
  #header {
      height: 10%;
      background: blue;
      width: 100%;
      padding: 22px 0 0 0;
      margin: 0 auto;
  }
  #textarea {
      background: yellow;
      line-height: 1.5em;
      width: 100%;
      height: 90%;
  }
  </code></pre>