Question

我在设置背景颜色时遇到错误...

我有一个网站，其结构是这样的：

<body>
<div id="container">
my stuff

在CSS文件中，我想为主体设置背景图像，并为容器设置背景颜色。但容器的背景颜色并未覆盖所有高度。请参阅我在下面提到的网站示例中的含义。

body {
background-image:url('foto.jpg');
background-color:#000000;
background-size:100%;
background-attachment:fixed;
overflow-y:scroll;
}
#container {
width:760px;
margin:20px auto 0 auto;
color:rgb(230,230,230);
border-width:1px;
border-color:white;
border-style:none solid none solid;
background-color:red;
}

#container的背景颜色不会扩展到页面的整个高度。

http://web.fc.up.pt/DGSIII/bug_height/

Answer 1

只需从height: 100%;移除#container即可。 Divs会根据自己的内容自动调整高度。

这是你想要的吗？ http://jsfiddle.net/t7wsX/

Answer 2

在body标签中使用它

body{padding-bottom:0;margin-bottom:0;}

Answer 3

请尝试以下CSS

#container {
    width:760px;
    margin:20px auto 0 auto;
    color:rgb(230,230,230);
    border-width:1px;
    border-color:white;
    border-style:none solid none solid;
    background-color:red;
    height:100%;
}

Answer 4

在样式表中进行这些更改

body{padding:0;margin:0;}

#container{margin: 0 auto;}
#header{margin: 0 0 40px;}

元素不覆盖所有高度

4 个答案: