title: 'Absolute' container fits viewport without width/height CSS rules
body: <p>I found this page: 
  <a href="http://www.maddim.com/demos/spark-wp/" rel="nofollow">http://www.maddim.com/demos/spark-wp/</a></p>
  
  <p>There is a fixed header and a div underneath that stretches to viewport without having width or height defined. It allows overflow of content in y-axis and applies scrollbar(box scroll, no viewport scrollbar) when necessary. The HTML is very simple:</p>
  
  <pre><code>&lt;header&gt; ... &lt;/header&gt;
  &lt;div id="main" role="main"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main {
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 89px;
  }
  </code></pre>
  
  <p>After disabling all JS and deleting majority of page elements in firebug, the bare #main element still behaves as before.</p>
  
  <p>What technique was used here and where was it defined to create such behavior of the #main container?</p>