Ну, я думаю, что знаю, как это сделать, поэтому я запускаю код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
table
{
height: 100%;
width: 100%;
background-color: blue;
border-collapse:collapse;
}
tr#fixed
{
background: silver;
height: 100px;
}
tr#expand
{
background: gray;
}
td
{
text-align: center;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="fixed">
<td>100</td>
</tr>
<tr id="expand">
<td>*</td>
</tr>
</tbody>
</table>
</body>
</html>
(примечание, строгий + CSS)
И я нахожу, что хотя это работает в Firefox, Chrome и прочем! IE Мне нравится, IE имеет некоторое очень необычное поведение здесь. Короче говоря, IE игнорирует размеры в пикселях и вместо этого сравнивает относительные высоты! Он неверно сообщает об этом на панели инструментов разработчика IE, но вы можете ясно увидеть это, если добавите и измените высоту на tr#expand
Если вы установите высоту 100px, вы увидите, что оба tr на самом деле рендерит на 50%. При 200px вы получите разделение 33/66, а при 50px - 66/33! Похоже, что это верно для других модулей, таких как em, и я подозреваю, что это может быть связано с контентом, поскольку он имеет граничное поведение при низких единицах, таких как 5px. Насколько я вижу, IE здесь совершенно не работает. Это не ошибка, которую я видел раньше, ни та, которую я смог гуглить. До тех пор, пока не появится обходной путь, мне кажется, что вы SOL для строгого решения.