我想定义一个带有两个 div 的垂直布局，一个小的固定 div 在顶部，一个动态调整大小的在下面，这样底部的 div 将始终填满屏幕，仅此而已。所以我尝试如下定义它:
<html>
<body>
<div id="contents">
<div id="nav" style="width: 100%; height: 20px;"></div>
<div id="container" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
但是当我在 Firefox 中测试这个 html 时，它添加了一个垂直滚动条。似乎容器被赋予了窗口的 100% 高度，而不允许其上方有 20px 的 div。我错过了什么？
最佳答案
您可以在 #container 的 height 上使用 calc(100% - 20px) - 这将从 100% 中减去 20px #container 高度，这样两个高度之和等于其父容器的 100%。但是，如果您使用百分比高度，则必须将它们添加到没有固定高度设置的更高级别的所有父级/元素，就像我在下面的代码片段中所做的那样，以便元素具有其百分比的引用值(value)观。
html,
body {
height: 100%;
margin: 0;
}
#contents {
height: 100%;
}
#nav {
height: 20px;
background: blue
}
#container {
height: calc(100% - 20px);
background: red
}<div id="contents">
<div id="nav"></div>
<div id="container"></div>
</div>关于html - 带有两个子 div 的 div 会导致不需要的垂直滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44288097/