I would like a table to change size so that the content fills as much of the browser window as possible. The table will have a minimum size and will never be empty. The windows will have scroll bars when the content fills it. As the window expands (under user control) the table height will increase. The table height will not increase past the height required to show all of its data; the extra space at the bottom will be empty.

I have had some success at adjusting the div/table size, using a different method, but am having trouble using an external script. Issues are described at the bottom.

HTML Code:
<body onresize="resizetable()">
<div id="wrapper">
	<div id="header">
	<!-- header stuff -->
	</div>
	<div id="page">
		<!-- more div and content here -->
		<div id="landingtexts">
			<table id="filestable">
			<!-- table filled by server -->
			</table>
		</div>
		<!-- more div and content here -->
	</div>
	<div id="footer" style="clear:both;">
	<!-- header stuff -->
	</div>
</div>
</body>
CSS:
Code:
#landingtexts
{
	padding:0px;
	height:300px;
	min-height:300px;
	overflow-y:scroll;
}

#filestable
{
	height=auto;
}
Javascript:
Code:
function resizetable()
{
	// condition checking code
	var divl = document.getElementById("landingtexts");
	var tablef = document.getElementById("filestable");
	var requiredht = divl.style.minHeight + window.innerHeight - scrollhts;
	if (requiredht > tablef.style.scrollHeight)
	{
		// limit to table height
		requiredht = tablef.style.scrollHeight;
	}
	divl.style.clientHeight = requiredht;
}
where scrollhts is a calculated var.

Chrome's developer tools showed empty values for every (~450) settings inside divl.style so that divl.style.minHeight was 0 instead of 300. I had previously found that assigning divl.clientHeight, which shows a value, did not work.

Any suggestions about how to get the required settings (minHeight or min-height) and setting the height so that it changes?