title: CSS Height: Fill available space. No fixed heights
body: <p>So i have the following structure</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="head"&gt;&lt;/div&gt;
    &lt;div id="body"&gt;&lt;/div&gt;
    &lt;div id="foot"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am only using the ids for illustration purposes so this is not even necessarily for a full page.</p>
  
  <p>I want my container to specify a fixed size... or a relative size, does not matter. Lets for argument sake say 300px height. Also <code>overflow: hidden</code></p>
  
  <p>I want head/foot to expand to fit the content within itself, so <code>height: auto</code> is sufficient.</p>
  
  <p>I want the body to expand to fit the remaining space in between head and foot. If the content is too big, then scroll (<code>overflow: auto</code>).</p>
  
  <p><code>height: 100%</code> on <code>#body</code> does not work because then it gains the height of 300px like the parent and pushes part of itself and the footer out of the parent.</p>
  
  <p>Having head and foot <code>position: absolute</code> does not work because by taking them out of the document flow, some content of <code>#body</code> is hidden. To fix that we can use padding-top/bottom but we can't set a <code>padding-top: xxpx</code>/<code>padding-bottom: xxpx</code> on the <code>#body</code> because we don't know the necessary height of the head/foot hence why they are <code>height: auto</code>.</p>
  
  <p>Edit:</p>
  
  <p>I tried converting the container/head/body/foot into a table where the <code>#body</code> is <code>height: 100%</code>. This works great except that <code>#body</code> won't scroll if the content gets too big, instead the entire table expands to show all content. This is not the desired behavior as I need <code>#body</code> to scroll, not <code>#content</code> or it's parent.</p>
  
  <p>Any suggestions?</p>