title: my child div is not inheriting the 100% height
body: <p>I am having some issues with setting the child div (contentwrapper) to 100% height, when the parent div (wrapper) is set to 100%.</p>
  
  <p>any ideas why?</p>
  
  <p>the goal of this layout is</p>
  
  <p>100% header
  fixed LEFT, 100% RIGHT
  100% footer (but always on bottom)</p>
  
  <p>any help is appreciated.</p>
  
  <p>thanks,</p>
  
  <pre><code>&lt;form&gt;
  &lt;div id="wrapper"&gt;
  &lt;header&gt;
  &lt;div id="header"&gt;my header&lt;/div&gt;
  &lt;/header&gt;
  &lt;div id="contentwrapper"&gt;some other items&lt;/div&gt;
  &lt;footer&gt;
  &lt;div id="footer"&gt;my footer&lt;/div&gt;
  &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  
  
  html, body, form {
  border: 0;
  margin: 0;
  height: 100%;
  _height: 100%;
  width: 100%;
  }
  
  #wrapper {
      background-color: #DDDDDD;
      height: auto !important;
      height: 100%;
      margin: 0;
      min-height: 100%;
      position: relative;
      width: 100%;
  }
  
  #header {
      height: 50px;
      background-color: #666;
      width: 100%;
      _width: 100%; /* ie6 */
      z-index: 100;
  }
  
  #footer {
      width: 100%;
      background-color: #CCC;
      position: absolute;
      bottom: 0 !important;
      bottom: -1px;
      height: 40px;
      clear: both;
  }
  
  #contentwrapper {
      height: 100%;
      min-height: 100%; 
      background-color: Yellow;
  }
  </code></pre>