Check out this code snippet that exemplifies my issue:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width='100%' height='100%'>
<tr>
<td>
header
</td>
</tr>
<tr>
<td valign='top' height='100%'>
<table width='100%' height='100%' bgcolor='red'>
<tr>
<td>test</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The webpage I'm constructing consists of a header and a table beneath it. The table should occupy all the available vertical space without exceeding the screen height. While this code performs as expected in FF/Chrome/Safari, IE exhibits an issue where the nested table extends beyond the screen height due to the presence of the header, resulting in an unwanted vertical scrollbar.
Any ideas on how to resolve this problem?