使用Bootstrap網格系統的100％高度

我在使用Bootstrap網格系統的頁面佈局時遇到問題。我只是想要一個包含定義數量的鏈接的左側導航div，但導航應該垂直填充頁面的其餘部分，直到右側內容div的結尾。在我的情況下，使用100％高度似乎不起作用。使用Bootstrap網格系統的100％高度

<div class="row"> 
<div id="nav" class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <ul> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
     <li>Link</li> 
    </ul> 
</div> 
<div id="main" class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
    <h1>Header</h1> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
    <p>content</p> 
</div>

#nav { 
    position: relative; 
    height: 100%; 
    background-color: green; 
} 

#main { 
    height: 100%; 
    background-color: yellow; 
}

這裏是什麼我的工作小提琴：https://jsfiddle.net/jLh4vxf4/

水平佈局是好的，我不能讓我的導航與垂直結束我內容。感謝您的任何幫助。

來源

2015-08-13 noclist

重複的[？我怎樣才能引導列所有相同的高度（http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-所有這同一高度） –

我想這不是重複這個問題，因爲他使用百分比高度，這個問題並沒有解決他的問題在這種情況下。 –

他正在使用與另一個問題完全相同的100％百分比高度。例如如何使較小的列延長最長的一列的寬度... [他的例子工作]（https://jsfiddle.net/jLh4vxf4/2/） –

如果位置是相對的，身高100％不會尊重。

嘗試

position: fixed;

來源

2015-08-13 15:40:35

如果位置固定，則導航將不會滾動，如果它超出屏幕大小。 – noclist

根據您的瀏覽器兼容性的要求，你可以運用之妙「顯示：彎曲;」在父容器（本例中爲「div.row」），並刪除「height：100％;」來自兩個子元素（#nav和#main）。

這正是flex設計的目的。

它在大多數瀏覽器中支持，但不支持IE9或更低版本。檢查您的瀏覽器版本滲透統計數據，以確定這是否值得。（我通常設置一個2％的截止 - 我寧願98％的訪客有一個很好的經驗比100％有一個平庸的經驗）

來源

2015-08-13 15:53:51

下面是你的小提琴的修改版本：https：//jsfiddle.net/frxpngcn/1/ –

這個答案的作品，但在許多情況下不會是最好的選擇。

我使#nav成爲絕對定位，並且在主內容上插入了邊界左邊以模擬#nav的背景。

*{box-sizing: border-box} 

.row {position: relative} 

#nav { 
    position: absolute; 
    left: 0; 
    background: transparent; 
    z-index: 1; 
    width: 16.67%; 
    overflow: hidden; 
} 



#main { 
    background-color: yellow; 
    border-left: 16.67vw solid green; 

}

16.67％的寬度使得您的佈局仍然是液體，並且與您使用的寬度相同（總網格數的2/12）。 16.67vw相當於視口的16.67％，這在大多數情況下不會成爲問題。

它解決了這個問題，但同樣要小心，因爲它可能會帶來更多的問題而不是實用性。好處是你根本不需要使用height: 100%。

的jsfiddle：https://jsfiddle.net/jLh4vxf4/6/

來源

2015-08-13 16:13:06

需要在.row類上放置'position：relative'。我在JSFiddle上編輯它 –

使用Bootstrap網格系統的100％高度

回答

相關問題