堆垛液高差

Question

我可能在这里有一个严肃的大脑放屁，但我似乎无法完成我想要完成的使用div和css。我要做的是创建一个包装器，100%填充初始viewport视图，然后将更多的内容放在下面。如果我在桌子上这样做，它看起来大概是这样的：

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

工作很好。

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

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