title: Make center div take remaining screen with bottom div taking as much space as needed
body: <p>This is somewhat related to <a href="https://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width">this question</a> but I'm trying to achieve this when the div is aligned vertically.</p>
  
  <p>More or less, this is what I'm trying to achieve:</p>
  
  <h2>Main Div: Take the rest of the screen</h2>
  
  <hr>
  
  <h2>Footer Div: Take as much space as needed</h2>
  
  <p>The css for float:bottom isn't available, so I'd like to hear some alternatives.</p>
  
  <p>Here's what I have at the moment:</p>
  
  <pre><code>&lt;div id="main_div" style="height:100%;overflow:scroll"&gt;
  ...Contents
  &lt;/div&gt;
  
  &lt;div id="footer_div" style="height:50px"&gt;
  ...Contents
  &lt;/div&gt;
  </code></pre>
  
  <p>Footer shows below main_div and the user has to scroll down to see it, instead of main_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.</p>