title: html body is smaller than its contents
body: <p>Here's a basic <a href="http://jsfiddle.net/uZCKn/1/" rel="noreferrer">illustration</a> of the problem:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;
      html {width: 100%; height: 100%; background: red;}
      body {width: 100%; height: 100%; background: green;}
      
      .leftbar, .rightbar {height: 100%; background: blue;}
  
      .leftbar  {float: left;}
      .rightbar {float: right;}
  
      table {width: 100px; height: 800px; background: black; color: white;
             margin: 0 auto 0 auto;}
  &lt;/style&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;ul class="leftbar"&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;
      &lt;ul class="rightbar"&gt;&lt;li&gt;alpha&lt;/li&gt;&lt;li&gt;beta&lt;/li&gt;&lt;/ul&gt;
      &lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;blah blah&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>We can immediately see that the floated <code>ul</code> elements are as tall as the <code>body</code> which contains them, the problem is that the <code>body</code> is not as tall as the <code>table</code> which it contains.</p>
  
  <p>How do I make the <code>body</code> be big enough? In this example, I want the <code>leftbar</code> and <code>rightbar</code> to go all the way down, as far as scrolling allows, so you can never see any gap below them.</p>