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

如果在div中添加

#header

1. 如果浮动

   #header

   ，则来自的内容

   #someid

   将被迫在其周围流动。

2. 接下来，将

   #header

   的宽度设置为100％。这将使其展开以填充包含div的宽度

   #full

   。由于不再有空间在两侧流动，因此这将有效地将所有

   #someid

   内容都推到下面

   #header

   。

3. 最后，将

   #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

#someid

0

html, body, #full {  height: 100%;}#full {  display: flex;  flex-direction: column;}#someid {  flex-grow: 1;}