title: Change body height based on dynamic header height
body: <p>I have a layout with a top section which can grow in height, and a content section below which contains a chart. The basic HTML structure can be characterized as:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="top"&gt;
          &lt;span class="box"&gt;Box 0&lt;/span&gt;
          &lt;span class="box new"&gt;
              &lt;button&gt;+&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="chart"&gt;
         Chart
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each <code>box</code> element is a fixed width and height, and is a fluid design so that as the boxes cannot fit onto the same line, they wrap round to the next, making their container (<code>top</code>) grow.</p>
  
  <p>Here is an interactive demo at this stage: <a href="http://jsfiddle.net/d1d6bwbc/" rel="nofollow noreferrer">http://jsfiddle.net/d1d6bwbc/</a> where you can see that the <code>wrapper</code> is 100% width &amp; height (red border). The <code>top</code> has a magenta border, and grows as the boxes need to wrap and the <code>chart</code> has a blue border.</p>
  
  <p>I am trying to make that <code>chart</code> element fill 100% of the remaining height in <code>wrapper</code>.</p>
  
  <p>Here is my css so far</p>
  
  <pre><code>body{margin:0}
  .wrapper{
      position:absolute;
      border:1px solid red;
      height:calc(100% - 2px); /* account for border in this example */
      width:calc(100% - 2px); /* account for border in this example */
  }
  
  .top{
      border: 1px solid magenta;
      padding-bottom:5px
  }
  
  #chart{
      border: 1px solid blue;
      /* style chart to fill 100% of wrapper
  }
  </code></pre>
  
  <p>I have tried numerous css hacks and tricks, such as those found in <a href="https://stackoverflow.com/questions/17900122/stretch-child-div-height-to-fill-parent-that-has-dynamic-height">this question</a> and <a href="https://stackoverflow.com/questions/5581799/how-to-stretch-div-height-to-fill-parent-div-css">this one too</a> but they do not seem to work on my layout. </p>
  
  <p>I have complete control over the layout so if my markup requires some work that will be fine, but a simple way to achieve a fill on that <code>chart</code> element is what I'm after.</p>