title: Set div height to 100% of parent
body: <p>I want the following layout for my web page:</p>
  
  <pre><code>|         header       |
  | navigation | details |
  |            |         |
  </code></pre>
  
  <p>Where the navigation pane (content dynamically generated) contains hundreds of elements. I want a vertical scroll bar to be created on the navigation pane such that the pane has the height of the window minus the height of the header.</p>
  
  <p>My page roughly has the following structure:</p>
  
  <pre><code>&lt;div id=header&gt;&lt;/div&gt;
  &lt;div id=content&gt;
    &lt;div id=navigation&gt;&lt;/div&gt;
    &lt;div id=details&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>#navigation {
      float: left;
      width: 400px;
      height: 100%;
      overflow: auto;
  }
  
  #details {
      margin-left: 420px;
  }
  </code></pre>
  
  <p>This mostly works except that the navigation pane gets 100% of the height of the window, not 100% of the height of the window minus the height of the header. I'd rather not explicitly set the height of the header if I can avoid it. I am completely new to web development so I don't mind doing some reading. What do I need to do to achieve the layout that I want? </p>