如何使背景顏色成爲頁面的整個高度？

Question

我試圖讓主要內容區域有一個填充整個區域的背景圖像/顏色，但到目前爲止一直是不成熟的。

請參閱http://drewclifton.com/dev/dashboard/

到目前爲止，我已經嘗試添加一個fill類的container-fluid歸類格 - 也試過page-content-wrapper格...

.fill { 
    height:100%; 
    background:darkblue; 
} 

...但背景不延伸超過封閉的垂直高度#story-bar div

Answer 1

由於您使用百分比高度，.fill高度相對於其父。您需要定義每個祖先到一個高度，包括html和body元素：

html,body, 
div#wrapper, 
div#page-content-wrapper { 
    height:100%; 
} 

而且，你缺少的高度定義後分號爲.fill：

.fill { 
    height:100%; 
    background:darkblue; 
} 

這是一個WORKING EXAMPLE。

（這是異地，因爲我有麻煩將它裝入可運行的片段。）

Answer 2

將col-lg-12中的高度設置爲100％

Answer 3

你基本上會隨着高度的消失：100％在你的代碼，並嘗試這個

background-image: url("image.gif"); 
background-repeat: repeat-y; 

Answer 4

如果你希望的東西是整個頁面有一個darkblue的背景下，簡單地套用「背景：darkblue; 「財產和價值，你的「身體選擇」

即：

body { background-color:darkblue; }