title: 100% div height
body: <p>Hie Everyone</p>
  
  <p>I am designing a webpage with a fluid layout. I want to keep a 100% width and a 100% height.
  The problem is i dont know how to keep divs "left" and "right" with a 100% height inside their parent div, "wrapper".</p>
  
  <pre><code>&lt;div id="container" style="width:100%; height:100%"&gt;  
       &lt;div id="header" style="width:100%; height:100px"&gt;
       &lt;/div&gt;
  
       &lt;div id="wrapper" style="width:100%; height:(100% - 100px)"&gt;
             &lt;div id="left" style="width:250px; height:(100% - 100px)"&gt;
             &lt;/div&gt;
  
             &lt;div id="right" style="width:(100% - 250px); height:(100% - 100px)"&gt;
             &lt;/div&gt;           
       &lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help.</p>
  
  <p>Answer from doctype.com </p>
  
  <p>CSS</p>
  
  <pre><code>html, body{
      height: 100%;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container" style="width:100%; height:100%; position: absolute;"&gt;  
    &lt;div id="header" style="width:100%; height:100px;"&gt;
  header
    &lt;/div&gt;
    &lt;div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"&gt;
      &lt;div id="left" style="width:250px; height:100%; float:left;"&gt;
      left
      &lt;/div&gt;
      &lt;div id="right" style="width: 250px; height:100%; float:right; "&gt;
      right
      &lt;/div&gt;           
      main content
    &lt;/div&gt;          
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>