Штабелирование высоты жидкости 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 

Я возился с помощью дивы, пытаясь сделать это, и я действительно хочу, чтобы избежать не используя таблицу для макета (нет, спасибо 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