全屏布局让世界陷入困境。基于表格或基于CSS的解决方案将不胜感激。
目标是扩展到查看屏幕，“nav”由宽度固定，“top”由高度固定，理想情况下没有javascript。下面的代码一直有效，直到“内容”填满为止。当发生这种情况时，它需要滚动。但是，td上的溢出不起作用。也没有将它包裹在溢出的div周围。我认为这与表格自动扩展以适应内容div有关。但是，由于内容div需要拉伸到屏幕，因此它不能具有固定的高度。
<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>
答案 0 :(得分：0)
我发现this css layout，部分称为“粘性页脚”是最好的布局，这很简单，并且可以根据您的内容轻松扩展或收缩。
答案 1 :(得分：0)
是的，我特别对Firefox有这个问题。 Safari做得非常好（包括最小高度），但所有其他浏览器都无法做到。
我能够做到这一点的方法是强制指定的px高度onload和刷新使用，是的，Javascript。如果没有它，跨平台很难做到。
答案 2 :(得分：0)
你真的不应该尝试使用表格进行布局。
这是一些代码，我掀起了100％的高度，没有桌子：
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<style type="text/css">
#wrapper {
height: 100%;
width: 100%;
}
#column1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
overflow: hidden;
}
#column2 {
position: absolute;
top: 0;
left: 200px;
height: 100%;
overflow: hidden;
}
#row1 {
height: 200px;
overflow: hidden;
}
#row2 {
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="column1" style="background-color: yellow;">
bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
</div>
<div id="column2">
<div id="row1" style="background-color: orange;">
bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
</div>
<div id="row2" style="background-color: grey;">
bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah bwah
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>bwah<br>
</div>
</div>
</div>
</body>
</html>