堆叠流体高度divs

Question

我可能在这里有一个严重的大脑放屁，但我似乎无法完成使用DIVS和CSS完成的工作。我要做的是创建一个包装器，该包装器填充初始视图100％，然后将更多内容放在下面。如果我在桌子上这样做，看起来大致是这样的：

<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

我已经摆弄了尝试实现此目的的Divs，我真的很想避免使用表格进行布局（不，谢谢2001年），但是有人只使用CSS和Divs（无JavaScript）完成了此操作吗？

<</p>

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

工作正常。

当然，您可以通过绝对或固定定位实现相同的结果，但这与样本的简洁简单相等。

Answer 2

您只需要将html, body设置为height: 100%

html

<div class="container">
   <div class="one"></div>    
   <div class="two"></div>    
   <div class="three"></div>    
   <div class="four"></div>        
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>

CSS

body, html{
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
}
.container{
   width:100%;
   height:100%;
}
.one{
  height: 10%;
  background:red;
}
.two{
  height: 15%;
  background:green;
}
.three{
 height: 25%;
 background:black;
}
.four{
 height: 50%;
 background:yellow;
}

jsfiddle