title: Adding a scroll bar if div extends below bottom of view port
body: <p>I have a <code>&lt;div&gt;</code> in my page which contains a <code>&lt;table&gt;</code> of varying number of rows, i.e varying height:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;
    &lt;table&gt;
       &lt;tr&gt;...
       &lt;tr&gt;...
       ...
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>At the moment if the table content is long enough, the div extends below the bottom of the page (view port). I want to stop the div extending below the bottom of the page, and add a scroll bar. I can add scroll bars if the div height is fixed no problem with <code>overflow: scroll</code>. But I want the div height to fit to however the user has sized his browser window.</p>
  
  <p>Any ideas how to achieve this? I do not care or need the div to extend to the bottom of the page if there is no table content. Preferably a pure css solution as opposed to using javascript to fix the div height.</p>
  
  <p>Thanks </p>