Question

我想定义一个带有两个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。我错过了什么？

Answer 1

您可以在calc(100% - 20px)的{{1}}上使用height - 这会从#container高度的100％减去20px，这样两个高度总和为100％的父容器。但是，如果您使用百分比高度，则必须将它们添加到更高级别的所有父级/元素，这些父级/元素没有固定的高度设置，就像我在下面的代码段中所做的那样，以便元素具有百分比的参考值。

#container

html,
body {
  height: 100%;
  margin: 0;
}

#contents {
  height: 100%;
}

#nav {
  height: 20px;
  background: blue
}

#container {
  height: calc(100% - 20px);
  background: red
}

带有两个子div的div导致不需要的垂直滚动条

1 个答案: