title: Why does this CSS example use "height: 1%" with "overflow: auto"?
body: <p>I am reading a HTML and CSS book. It has a sample code of two-column layout.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #main {height: 1%; overflow: auto;}
          #main, #header, #footer {width: 768px; margin: auto;}
          #bodycopy { float: right; width: 598px; }
          #sidebar {margin-right: 608px; }
          #footer {clear: both; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="header" style='background-color: #AAAAAA'&gt;This is the header.&lt;/div&gt;
      &lt;div id="main" style='background-color: #EEEEEE'&gt;
          &lt;div id="bodycopy" style='background-color: #BBBBBB'&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
              This is the principal content.&lt;br /&gt;
          &lt;/div&gt;
          &lt;div id="sidebar" style='background-color: #CCCCCC'&gt;
              This is the sidebar.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer" style='background-color: #DDDDDD'&gt;This is the footer.&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The author mentions that the use of overflow auto and 1% height will make the main area expand to encompass the computed height of content. I try to remove the 1% height and tried in different browsers but they don't show a difference. I am quite confused of its use. Any idea?</p>