title: CSS: Extend div to fit the whole page
body: <p>I am trying to find a way to extend a <code>div</code> to fit the rest of the page, without using <code>JavaScript</code>. </p>
  
  <p>Some code I written to start with:  </p>
  
  <p><strong>HTML:</strong>  </p>
  
  <pre><code>​&lt;div class="bodyContainer"&gt;
      &lt;div class="sidebar"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS:</strong>  </p>
  
  <pre><code>.bodyContainer {
   border: 1px solid black;
   width: 100%;
   min-height: 50px; 
   height: 100%;    
  }
  
  .sidebar {
      height: 100%;
  }
  
  .container {
      height: 100%;
  }
  </code></pre>
  
  <p>The code above doesn't extend the <code>div</code> to fit the rest of the page.   </p>
  
  <p>​I also started a <code>JSFiddle</code> to see what happens. Link: <a href="http://jsfiddle.net/andrewtomici/BwVWx/" rel="nofollow">JSFiddle</a></p>