I want to set the size of a table so that I can use in line scrolling. So the table height needs to be the remaining height of the page but never get any larger. And I don't want a hard fix like pixel size. I want it to vary based on the window size. Anyone know the css for this?
You can use the vh unit, but you will need to specify a height for the layout elements on your page if you want the table height to be the "remaining height of the page".
What is a vh? 1vh is 1% of the viewport height, the height inside the window when the page is loaded. 100vh is 100% of the viewport height. I don't believe the height is adjusted when the window is resized.
<style type="text/css">
div#header {
height: 25vh;
overflow: scroll;
}
div#table {
height: 75vh;
overflow: scroll;
}
</style>
<body>
<div id="header">This text explains the contents of the table below.</div>
<div id="table"><table>...</table></div>
</body>