添加一个占据所有可用垂直空间的 DIV答案

【问题标题】：Add a DIV that takes up all available vertical space添加一个占据所有可用垂直空间的 DIV
【发布时间】：2015-03-20 07:46:22
【问题描述】：

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

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

我想在这个占据页面上所有剩余垂直空间的 DIV 之后添加一个 DIV。我该怎么做？

我花了一整天的时间在这上面，CSS 开始让我发疯了。

【问题讨论】：

大声笑 - 我也尝试过使用表格，但它不起作用......介意告诉我我会怎么做吗？

标签： css html

【解决方案1】：

这个 div 里面必须有什么？

如果它只是一个颜色填充，只需将你的蓝色 div 放在另一个 div 中，你提供背景颜色并使其适合 100% 的浏览器窗口？

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

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

【讨论】：

感谢您的回复！背景颜色就在那里，因此您可以看到 DIVS。我有一个应用程序，其中有一个谷歌地图，在它下面有一个海拔剖面。所以我一般希望地图占据屏幕的80%（它需要尽可能多的屏幕），而高程剖面有20%。然而，随着屏幕的垂直尺寸缩小，海拔剖面必须保持可见（最小高度），如果有人有一个大屏幕，我不希望海拔剖面浪费更适合地图的空间（最大高度）。
谷歌地图的工作方式，必须有一个高度的容器div，否则它会缩小到零。
如果第 2 个 DIV 中的内容需要滚动，这将不起作用。

【解决方案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 的更多信息。

【讨论】：