title: Make HTML content area fit to viewport height?
body: <p>I just made this demo extracting out what I'm trying to accomplish:</p>
  
  <ul>
  <li><a href="http://ilove4d.com/auto-size.html" rel="nofollow noreferrer">Autosize Main Content Area</a></li>
  </ul>
  
  <p><a href="http://ilove4d.com/autosize.png" rel="nofollow noreferrer">alt text http://ilove4d.com/autosize.png</a></p>
  
  <p>I want the pink/yellow area to act according to these rules:</p>
  
  <ul>
  <li>Minimum height is the size of its content (which is variable) IF content size is smaller than viewport size</li>
  <li>Otherwise minimum height is such that it adjusts to fill the window.</li>
  </ul>
  
  <p>Checking out the source to that demo, what am I missing?  I feel like this is a pretty easy case that shouldn't require javascript.</p>
  
  <p>Any ideas?</p>