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

Question

我正在尝试让主要内容区域的背景图像/颜色填满整个区域，但到目前为止还没有成功。

请参阅http://drewclifton.com/dev/dashboard/

到目前为止，我已尝试在fill分类div中添加container-fluid类，并尝试了page-content-wrapper div ...

.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

如果您希望整个页面具有深蓝色背景，只需应用＆＃34;背景：深蓝色;＆＃34;你的＆＃34;身体选择器＆＃34;

的属性和价值

即：

body { background-color:darkblue; }