title: Make footer height extend to bottom of the page
body: <p>I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.</p>
  
  <p><strong>I want my footers height to expand to the bottom of the page. How can I do this?</strong></p>
  
  <p>The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it. </p>
  
  <p>Heres my JSFiddle: <a href="http://jsfiddle.net/5U6ZB/2/embedded/result/" rel="noreferrer">http://jsfiddle.net/5U6ZB/2/embedded/result/</a></p>
  
  <pre><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;!-- height is dynamic sometimes it will be full of divs that makes it
           longer than the screen height other times it only has 1 div  --&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;!-- How do I make the footer height fill up the rest of the page height? --&gt;
  &lt;/div&gt;
  
  body { background-color: white; }
  div  { width: 100%; }
  
  #header {
      height: 400px;
      background-color: RGB(200,200,200);
  }
  
  #content {
  
  }
  
  #footer {
      background-color: RGB(112,112,112);
      /*How do I make the footer height fill up the rest of the page height?*/
  }
  </code></pre>