我对一个问题有疑问，我最初认为这个问题很容易解决。但显然不是——至少不是只有 CSS。
这是基本情况:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
我有一个占满屏幕高度 90% 的包装 div 和两个内部 div。第一个 div“top”包含一些不同的元素。第二个 div“content”应该填充包装 div 的剩余空间。
到目前为止，我还没有找到一种方法来设置 div“content”来填充剩余空间——即使我知道 div“top”的确切高度，因为我只知道包装分区。
因此，我很乐意学习一种方法，让 div“内容”填充剩余空间，或者如何混合相对和绝对大小(即高度:100%-100 像素)。
最佳答案
目前没有跨浏览器的解决方案来实现您正在尝试使用 div 元素和 CSS。但是，您可以通过使用 table 的可靠方法获得所需的行为。
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
编辑:
看来我的回答激怒了一群黄蜂。似乎有近乎宗教信仰的追随者说使用表格进行布局是不好的。在许多情况下，这是绝对正确的，但是 there are situations where a table will do what CSS cannot .这是其中一种情况，CSS 替代方案即将出现，但大多数浏览器尚不支持它。由站点设计者决定他现在是想要具有跨浏览器功能的布局，还是使用具有限制的纯 CSS 布局，将来可能更易于维护。
关于html - 在 CSS 中混合相对大小和绝对大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9239706/