如何填充剩余高度的100％？

一尘不染

css

+--------------------+
| |
| |
| |
| |
| 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%;}

还是这种方法错误？我应该怎么做？请看我的演示并告诉我我的错误。

阅读 355

2020-05-16

共1个答案

一尘不染

如果在div中添加#header以下内容来包装1的内容，则应该能够执行此操作。

如果浮动#header，则来自的内容#someid将被迫在其周围流动。
接下来，将#header的宽度设置为100％。这将使其展开以填充包含div的宽度#full。由于不再有空间在两侧流动，因此这将有效地将所有#someid内容都推到下面#header。
最后，将#someid高度设置为100％，这将使其与高度相同#full。

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设置为大于的值0。

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

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

#someid {
  flex-grow: 1;
}

2020-05-16