Question

我可能在这里有一个严重的脑屁但我似乎无法完成我想用div和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

我已经摆弄使用div试图完成这个并且我真的想避免使用表格进行布局（不用谢谢2001）但是有没有人使用css和divs（没有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

当然，您可以通过绝对或固定定位获得相同的结果，但这是您的样本的简洁等效。

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

堆叠液体高度divs

2 个答案: