I have a <div> in my page which contains a <table> of varying number of rows, i.e varying height:

<html>
<head></head>
<body>

<div>
  <table>
     <tr>...
     <tr>...
     ...
  </table>
</div>

</body>
</html>

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 overflow: scroll. But I want the div height to fit to however the user has sized his browser window.

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.

Thanks

css scrollbar html
Edit
Report