I wish to reimplement a GUI element (previously Tk) in HTML + CSS + Javascript, but achieving the same layout behaviour is eluding me (new to CSS). The goal is to have a page consisting mostly of a table, with a text entry box below it, at the bottom of the view. When the window is resized, the rightmost column of the table should expand/contract to suit, as should the entry field. There should initially be empty space between the empty table (anchored at the top of the view) and the entry box (anchored to the bottom of the view). As the number of rows in the table increases beyond what will fit in the view the table should become scrollable such that the entry box remains in view and at the bottom of the view.
What I have so far is a poor approximation - height: 90% is crude and wrong, the input field doesn't expand, etc., but it should be enough to illustrate what I am trying to achieve.
<html>
<head>
<style type="text/css">
#tableContainer {
overflow: auto;
height: 90%;
}
table {
border: thin solid grey;
}
.expand {
width: 100%;
}
div {
margin: 12px;
}
</style>
</head>
<body>
<div id="tableContainer">
<table>
<tr>
<th>Time
<th>Status
<th>Description
<tr>
<td>12:34:56
<td>Error
<td class="expand">Something catastrophic happened
</table>
</div>
<div>
Annotate: <input type='text' />
</div>
</body>
</html>
What is the correct way of solving this?