title: fixed header div with scrollable div below
body: <p>I'm trying to place two divs one above the other. The top one has a fixed size. The bottom one needs to fill the rest of the page height, without making the page higher if it's content is too big.</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="top-padding"&gt;&lt;/div&gt;
      &lt;div id="stuff"&gt;
          some content
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          End of content.
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- content --&gt;
  </code></pre>
  
  <p>My attempt so far is: <a href="http://jsfiddle.net/b4fEE/" rel="noreferrer">http://jsfiddle.net/b4fEE/</a></p>
  
  <p>The problem I have is that the green div is too big. I need as way to specify it's height as</p>
  
  <pre><code>100% - 30px
  </code></pre>
  
  <p>I'd prefer to do this in pure css, but I will resort to javascript/jquery if necessary.</p>