title: How to make a div take all the remaining height AND display its scroll bar without making the browser have one too
body: <p>I'm trying to combine different questions into a single answer yet none seem to do exactly what I'd like.</p>
  
  <p>Given a div "container" with a div "spacer" of fixed height, another div "data" would take up a maximum of the remaining height of its parent, not break its parent's V-scroll, nor the browser's but instead have its own V-scroll only. Sounds simple enough.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="spacer"&gt;spacer&lt;/div&gt;
      &lt;div id="data"&gt;
          text&lt;br/&gt;
          text&lt;br/&gt;
          text&lt;br/&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body, #container { height:100% }
  #spacer { height: 50px; }
  #data
  { 
    overflow-y: scroll;
    height: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mpprog/NqpGB/" rel="nofollow">JSFiddle example (gone wrong)</a></p>
  
  <p>I keep breaking the V-scroll on the page (probably because the parent gets as high as the page, yet is shifted down by the fixed height.</p>