title: How to make a scrollable element fill 100% of the remaining height of a parent element?
body: <p>I have a container div that is a fixed height. It has some content and another child element. I would like the child element to scroll when it has filled the remaining height.</p>
  
  <p>I came up with a solution that seems to work, but I'm not sure it is correct.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    #container {height: 100px; width: 100px; border: solid; }
    #titlebar { background: gray;}
    #app-body {height: 100px; overflow: auto; background: lightblue;}    
  &lt;/style&gt;
  </code></pre>
  
  <p>Working <a href="http://jsfiddle.net/fZHva/" rel="nofollow">fiddle</a>. <em>Edit: updated fiddle to remove style tags.</em></p>
  
  <p>Is there a better way? I don't like restating the container height in the child div. </p>