title: 100% height doesn't work?
body: <pre><code>+----------------------+
  |          1           |
  |                      |
  +----------------------+
  |       |              |
  |   2   |              |
  |       |              |
  |       |      4       |
  +-------|              |
  |    3  |              |
  |       |              |
  +----------------------+
  </code></pre>
  
  <p>As shown above (1) I need to add some header contents, (2) left navigation, (3) some content within 2 to center of 3 but don't know the height because of 4, (4) larger contents . Hence, I need to specify <code>height: 100%;</code> but doesn't work. How to do?  </p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>&lt;div id="wrap"&gt;
  &lt;!--contents of (1)--&gt; 
  &lt;/div&gt;
  &lt;div id="wrap"&gt;
  &lt;div id="left-nav"&gt;
  &lt;!--contents of (2)--&gt;
  &lt;div id="someid"&gt;
  &lt;!-contents of (3)--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="main"&gt;
  &lt;!--contents of (4)--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>main css i want to use background (2)&amp;(3) same, background of (4) different.</p>
  
  <pre><code>#left-nav{width: 200px; background-color: red; height: 100%;}
  </code></pre>
  
  <p><strong><a href="http://tutorialzy.blogspot.com/2013/03/fundamental-history.html" rel="nofollow">chek this link</a></strong> the red text with red border is what i want to give the <code>height: 100%;</code></p>