html - 如何填充 100% 的剩余高度？

Question

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

如上所示(1)的内容未知，因为它可能会在动态生成的页面中增加或减少。如上所示的第二个 div (2) 应填充剩余空间。

这是我的 html 的例子

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

CSS...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

还是这个方法不对？我应该怎么做？请看我的 demo 并指出我的错误。

Answer 1

如果您添加一个 div(下面的 #header)来包装 1 的内容，您应该能够做到这一点。

1. 如果您 float #header，来自 #someid 的内容将被迫围绕它流动。

2. 接下来，将 #header 的宽度设置为 100%。这将使它扩展以填充包含的 div 的宽度，#full。这将有效地将所有 #someid 的内容推送到 #header 下面，因为两侧不再有空间流动。

3. 最后，将#someid的高度设置为100%，这将使它与#full的高度相同。

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

---

更新

我认为值得一提的是，今天的现代浏览器都很好地支持 flexbox。可以更改 CSS，使 #full 成为 flex 容器，并且 #someid 应该将其 flex grow 设置为大于 0 的值。

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}