title: How do I use CSS to position a fixed variable height header and a scrollable content box?
body: <p>I'm trying to make a web page with a fixed header and a scrollable content area. This is trivial when the header has a known height but I'm struggling to find a solution for when the header is fluid.</p>
  
  <p>The layout I want is:</p>
  
  <pre><code>--------------
  head
  --------------
  content
  --------------
  </code></pre>
  
  <p>where "head" is whatever height its content needs it to be and "content" has no minimum height but will reach a maximum height of the bottom of the viewport before becoming scrollable.</p>
  
  <p>Is this possible these days in pure CSS? I'm targeting IE8+.</p>
  
  <p>To clarify what I want, <a href="http://jsfiddle.net/Eric/bqYk8/" rel="noreferrer">here is what I would do if I knew the height of the header</a>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
  
  body {
      margin: 0;
  }
  
  #head {
      background: yellow;
      height: 20px; /* I can't rely on knowing this. */
  }
  
  #content {
      background: red;
      position: absolute;
      top: 20px; /* here also */
      bottom: 0;
      width: 100%;
      overflow: auto;
  }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="head"&gt;some variable height content&lt;/div&gt;
          &lt;div id="content"&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>