title: Child div 100% height
body: <p>A more convoluted example of this question is here: <a href="https://stackoverflow.com/questions/3945326/child-div-height-of-100-being-ignored">child div height of 100% being ignored</a> (a working solution is yet to be found)</p>
  
  <p>Validating test case for my question: <a href="http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html" rel="nofollow noreferrer">http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html</a>. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).</p>
  
  <p>My question is simple, can this be done without</p>
  
  <ol>
  <li>Reverting to jQuery (yucky!) or</li>
  <li>Reverting to tables (yuckier!)</li>
  </ol>
  
  <p>I am yet to find a single example of how this can be done using the CSS layout model.</p>
  
  <p>Thankyou.</p>
  
  <p>EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.</p>