Question

我有一个空页面上有一个DIV：

<div style="height: 20%;
            min-height: 10px;
            max-height: 100px;
            width: 100%;
            background-color: blue;"></div>

我希望在此之后添加一个DIV，占用页面上所有剩余的垂直空间。我该怎么做？

我整天都花在这上面，CSS开始让我发疯。

Answer 1

这个div里面有什么？

如果它只是一个彩色填充物，只需将你的蓝色div放在另一个div中，你会给出一个背景颜色并使它适合你浏览器窗口的100％？

它将看起来像彼此之下的2个div。如果你需要内容，你可以随时将另一个div放在蓝色的div下，并提供你想要的任何内容。

编辑：代码示例： http://jsbin.com/efefe/2

Answer 2

假设你有两个div：

<div id='one'></div>
<div id='two'></div>

其中#one具有可变高度，而#two应该消耗所有剩余的垂直空间：

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#one {
  flex: none;
}
#two {
  flex: 1;
}

此外，如果您希望#two可滚动，则可以添加：

height: 100%;
overflow-y: scroll;

允许它垂直滚动以显示它的全部内容。

您可以阅读有关display：flex here。

的更多信息

添加占用所有可用垂直空间的DIV

2 个答案: