Having a world of trouble with a fullscreen layout. Either a table or css based solution would be appreciated.
The goal is to expand to the viewing screen, with the "nav" fixed by width and "top" fixed by height, ideally without javascript. The code below works until the "content" fills up. When that happens it needs to scroll. However, the overflow on the td doesn't work. Neither does wrapping it around a div with overflow. I think this has to do with tables auto expanding to fit the content div. However, since the content div needs to stretch to the screen, it can't have a fixed height.
<table style="width: 100%; background: blue; height: 100%">
<tr>
<td id="nav" style="width: 200px; background: yellow"></td>
<td style="background: green">
<table style="width: 100%; height: 100%; background: purple">
<tr>
<td id="top" style="height: 200px; background: orange"></td>
</tr>
<tr>
<td id="content" style="background: gray; overflow-y: auto">
</td>
</tr>
</table>
</td>
</tr>
</table>