css - CSS 960 填充页面

Question

我正在使用http://960.gs/并且我希望我的container_12班级填写页面。

编辑：只填充高度。

我试过：

.container_12{
    background-image:url(../images/background_2.png);
    background-position:center top;
    background-repeat:no-repeat;
    min-height:100%;
    height:auto;
}

但什么也没发生。

Answer 1

这仅仅是因为你想要一个大的背景图像吗？为什么不直接使用：

body {
  background-image:url(../images/background_2.png);
  background-position:center top;
  background-repeat:no-repeat;
}

Answer 2

这个.container_12类有一个固定的宽度（你猜对了，960px），所以它不会填满整个页面。您想设置其父元素的背景 - 这可以是body容器 div。

body {
    background-image:url(../images/background_2.png);
    background-position:center top;
    background-repeat:no-repeat;
}

看看这个演示页面的风格-.container_12有粉红色/白色条形背景，它只占用 960 像素。占据整个页面的蓝色背景设置为body：

body {
  background: #123;
}

---

要使.container_12页面占据整个高度，您需要将其高度及其父元素的高度设置为 100%；

html, body {
  height: 100%;
}
.container_12 {
  height: 100%;
  background-color:#ccc;
}

为什么一定要指定父元素的高度？的高度.container_12是 100%，是什么的100% ？它是父元素。