title: Make div take up rest of space (height)?
body: <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;span&gt;
              &lt;span&gt;First&lt;/span&gt;
          &lt;/span&gt;
          &lt;span&gt;
              &lt;span&gt;Second&lt;/span&gt;
          &lt;/span&gt;
          &lt;span class="active"&gt;
             &lt;span&gt;Thrid&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="body"&gt;
          &lt;div class="Control1"&gt;
              Content!
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container
  {
      height: 300px;
      border: black 1px solid;
  }
  
  .container &gt; .header
  {
      background: grey;
  }
  .container &gt; .header &gt; span
  {
      display: inline-block;
      padding: 10px;
  }
  .container &gt; .header &gt; .active
  {
      background: black;
      color: white;
  }
  
  .container &gt; .body
  {
      height: 100%;
      overflow: auto;
      background: lightgrey;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ytg8S/" rel="noreferrer">http://jsfiddle.net/ytg8S/</a></p>
  
  <p>My problem here is that i have the container div thats 300 px in height, and then i have the header thats of unknown height (depending on number of items on it and the screen size it could be more than one row.) how do i make the .body take up the rest of the space and show a scroll if it has more content than there is space for??</p>
  
  <p>my first idea was to fiddle with absolute positioning but that didn't work when i had more than one row of .header items..</p>
  
  <p>I can't change the html as that is generated by a third party component (well i could but it would be a lot of work) and i would rather avoid using javascript if i can..</p>