title: CSS - header - always bottom footer and 100% content
body: <pre><code>&lt;body&gt; 
      &lt;div id="wrap"&gt;
          &lt;div id="header"&gt;
              HEADER
          &lt;/div&gt;
          &lt;div id="inner-wrap"&gt;
              &lt;div id="content"&gt;
                 CONTENT
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              FOTTER
          &lt;/div&gt;
      &lt;/div&gt; &lt;/body&gt;
  </code></pre>
  
  <p>AND CSS:</p>
  
  <pre><code>html { height:100%; max-height:100%; }
  
  body {
      margin:0;
      padding:0;
      height:100%;
      max-height: 100%;
  }
  
  #wrap {
      min-height:100%;
      height: 100%;
      position:relative;
  }
  * html #wrap { height:100% }
  
  #inner-wrap {
      padding-bottom:50px;
      min-height: 100%;
  }
  #inner-wrap:after {
      content:" ";
      display:block;
      clear:both;
  
  }
  * html #inner-wrap {
      height:100%;
  }
  
  #header
  {
      width: 100%;
      background-color: #C0C0C0;
      height: 16px;
      color: White;
      text-align: center;
      position: relative;
      top:0px;
  }
  #footer
  {
      width: 100%;
      background-color: #C0C0C0;
      height: 50px;
      position:absolute;
      bottom: 0;
      color: White;
      text-align: center;
  }
  #content
  {
      width: 1000px;
      height: 100%;
      background-color: #F5FDEC;  
      margin: 0 auto 0 auto;
  }
  </code></pre>
  
  <p>The Problem:</p>
  
  <p>How i can make this: HEADER top 16px,
                       CONTENT dynamic 100% height,
                       FOOTER at end of page</p>
  
  <p>If i give 100% to inner-wrap DIV, them after footer is white space.</p>
  
  <p>Thx</p>