行高不能正確顯示

Question

我已經使用bootstrap 2.3.2 css創建了一個html東西。該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