title: Extend div to bottom of page (only HTML and CSS)
body: <p>Its a very simple problem but I can't seem to find a suitable solution online. I want to have a list of elements in natural flow with the last element extended to the bottom of the page. So if I have</p>
  
  <pre><code>&lt;div id="top" style="height:50px;"&gt;&lt;/div&gt;
  &lt;div id="bottom" style="background:lightgrey;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I need element <code>bottom</code> to extend from the bottom of <code>top</code> to the bottom of the page. Any solution that uses only html and css is welcome, and you can add container divs or anything, as long as I can get dynamic resizing of the <code>bottom</code> div</p>
  
  <p>EDIT:
  I don't want to hard-code any values for <code>bottom</code>, because I want <code>bottom</code> to adjust if <code>top</code> is resized</p>
  
  <p>here's a fiddle for all your fiddling needs: <a href="http://jsfiddle.net/8QnLA/">http://jsfiddle.net/8QnLA/</a></p>