title: CSS: header, footer, and streatchable main content area
body: <p>I would like to have a web page with a header 120px tall, a footer 120px tall,
  and a main content whose minimum height is 600px but when the browser is then
  stretched vertically past 840px in height (or the user zooms out with
  "control minus" on Firefox), I want the body to stretch vertically
  to fill all available space minus the header and footer space.</p>
  
  <p>Here is what I tried:</p>
  
  <pre><code>&lt;header&gt;This is the header.&lt;/header&gt;
  &lt;div id="mainContent"&gt;This is the main content.&lt;/div&gt;
  &lt;footer&gt;This is the footer.&lt;/footer&gt;
  </code></pre>
  
  <p>and this is the CSS:</p>
  
  <pre><code>header { height: 120px; background: red; }
  div#mainContent { min-height: 600px; height: 100%; background: green; }
  footer { height: 120px; background: blue; }
  </code></pre>
  
  <p>Here is the complete code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  header { height: 120px; background: red; }
  div#mainContent { height: 100%; background: green; }
  footer { height: 120px; background: blue; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;This is the header.&lt;/header&gt;
  &lt;div id="mainContent"&gt;This is the main content.&lt;/div&gt;
  &lt;footer&gt;This is the footer.&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What is the correct way of achieving the effect I'm after.</p>
  
  <p>Thanks.</p>