CSS 960填充页

我使用的是http://960.gs/，我希望我的container_12类填充页面。CSS 960填充页

编辑：只填充高度。

我想：

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

但没有任何反应。

来源

2012-12-30 GerardMT

设置为'100％'宽度和高度的元素从父元素的宽度和高度继承。如果'html，body'元素没有'height：100％'，则不会发生。此外，您还必须管理填充和边距。我假设960.gs为你处理这个问题，但以防万一。 –

谢谢。我有body {height：auto;}并且是错误的。 – GerardMT

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

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

看那风格this demo page - .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％的什么？它是父元素。

来源

2012-12-30 22:52:27 sachleen

你有理由。对不起，我已经解决了这个问题。只填充高度。 – GerardMT

没问题，我更新了我的答案。 – sachleen

谢谢。我的身体错了，因为你有body {height：auto;} – GerardMT

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

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

来源

2012-12-30 22:50:29

坦克但在后台我有其他图片。 – GerardMT

回答

相关问题