title: How to fill vertical space between two dynamic divs?
body: <p>Assume the following html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;!-- dynamic height --&gt;
          &lt;/div&gt;
          &lt;div id="main" style="overflow: scroll;"&gt;
              &lt;!--
                  contains actual content
                  height should be whatever is left over
              --&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;!-- dynamic height --&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>basically what I want is:</p>
  
  <p><code>main height = body height - (header height + footer height)</code></p>
  
  <p>The body and html height is 100%.</p>
  
  <p>As both the height of <code>header</code> and <code>footer</code> are dynamic (will change very frequently), I need a dynamic way to set the height of <code>main</code>, i.e, I can't specify any of the heights in pixels or percentages.</p>
  
  <p>There are indeed other similar questions, but I am not looking for a "floating/sticky footer", the <code>main</code> div <em>must</em> have the remaining height.</p>