строка высота отображается неправильно

Question

Я создал html-материал, используя bootstrap 2.3.2 css. Html будет иметь четыре строки с разной высотой, например, для первой строки она будет 10%, вторая строка - 20%, третья строка - 40%, а четвертая - 40%. Html - рендеринг, но проблема в том, что высота каждой строки не отображается правильно.

Может кто-нибудь пожалуйста, скажите мне решение этой

Мой код, как указано ниже

JSFiddle

HTML

<div id="content"> 
    <div class="row1"> 
    <div class="row-fluid"> 
     <div class="span6">content1</div> 
     <div class="span6">content1</div> 
    </div> 
    </div> 
    <div class="row2"> 
    <div class="row-fluid"> 
     <div class="span6">content2</div> 
     <div class="span6">content2</div> 
    </div> 
    </div> 
    <div class="row3"> 
    <div class="row-fluid"> 
     <div class="span4">content3</div> 
     <div class="span4">content3</div> 
     <div class="span4">content3</div> 
    </div> 
    </div> 
    <div class="row4"> 
    <div class="row-fluid"> 
     <div class="span3">content4</div> 
     <div class="span3">content4</div> 
     <div class="span3">content4</div> 
     <div class="span3">content4</div> 
    </div> 
    </div> 
</div> 

CSS

.row1 { 
    height: 10%; 
    background: red; 
} 

.row2 { 
    height: 20%; 
    background: yellow; 
} 

.row3 { 
    height: 40%; 
    background: orange; 
} 
.row4 { 
    height: 40%; 
    background: violet; 
} 

#content { 
    height: 100%; 
} 

Answer 1

Для того, чтобы использовать высоту на основе процентной, всех предков должны иметь определенную высоту.

Добавьте это к вашему примеру:

html, body { 
    height: 100%; 
} 

JSFiddle

Если элементы сильно вложенными, лучшим решением может быть использование вместо следующего:

#content { 
    height: 100vh; 
} 

JSFiddle