css - 堆叠流体高度 divs

Question

我在这里可能脑子放了一个严重的屁，但我似乎无法使用 div 和 css 完成我想完成的事情。我想要做的是创建一个包装器，它 100% 填充初始视口(viewport) View ，然后在下面放置更多内容。如果我在表格中这样做，它看起来大致像这样:

<table height="100%">
<tr height="10%">
<td>Blank</td>
</tr>
<tr height="15%">
<td>Section 1</td>
</tr>
<tr height="25%">
<td>Section 2</td>
</tr>
<tr height="50%">
<td>Section 3</td>
</tr>
</table>
Look here is more content under where the viewport is

我一直在尝试使用 div 来实现这一点，我真的想避免使用表格进行布局(不，谢谢 2001)但是有人只使用 css 和 div(没有 javascript)来完成这个吗？

Answer 1

您可能忘记将主体的高度设置为 100%？

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

CSS:

html,body { height:100%; }
#div1 { height:10%; background:red; }
#div2 { height:15%; background:green; }
#div3 { height:25%; background:red; }
#div4 { height:50%; background:green; }

Works fine .

当然，您可以使用绝对定位或固定定位获得相同的结果，但这是您示例的干净简单的等价物。