2013-07-29 64 views
8

我是BootStrap的新手,因此瞭解繩索並瞭解它。我試圖在列網格中實現100%的高度,以便覆蓋頁面的100%高度。現在沒有高度設置。當我嘗試以像素或%爲單位指定col-lg-9和col-lg-3的高度時,不會發生任何更改。不知道可能是什麼問題。 這裏是我使用在Twitter中將100%高度設置爲列Bootstrap

<body> 
<div class="row"> 
"Top bar" 
</div> 
<div class="container"> 
     <div class="row"> 
     <div class="col-lg-3"> 
side bar 
</div> 

<div class="col-lg-9"> 
side bar 
</div> 

</div> 

的基本結構和這裏是每個項目的CSS

@media (min-width: 1200px) 
.container { 
max-width: 1170px; 
} 
.row { 
margin-bottom: 20px; 
} 
.col-lg-9 { 
width: 75%; 
padding: 10px 20px; 
border-radius: 0 10px 10px 0; 
-moz-border-radius: 0 10px 10px 0; 
-webkit-border-radius: 0 10px 10px 0; 
-o-border-radius: 0 10px 10px 0; 
border: 0 none; 
padding-top: 3%; 
min-height: 90%; 
} 
.col-lg-3 { 
width: 25%; 
background-color: #192D38; 
color: #88A7A9; 
min-height: 90%; 
} 
+1

嘗試設置的父元素的高度以及HTML和身體對於初學者 – Danield

回答

18

試試這個:

html,body 
{ 
    height: 100%; 
} 

如果不工作,然後用檢查元素,並驗證父元素的高度爲100%。 (因爲如果他們沒有 - 那麼子元素不會得到100%的高度,除非它們是position:absoluteposition:fixed

+0

投票了以百分比道具高度變!從父元素 – RDK

+1

,不工作我已經設置高度的所有元素的HTML,身體,容器,行,然後列但無效 –

+0

@AhmarAli我只是使用檢查元素,並添加了100%的HTML,身體容器和行 - 並且它可以工作,但是當你在行上應用100%的高度時 - 不要將它添加到行類,而是添加到element.style,否則每行都會獲得100%的高度! – Danield

相關問題