如何使背景颜色成为页面的整个高度？

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; }