Question

我有一个960px宽的容器，漂浮在主体的顶部。

我希望身体是灰色的，容器是白色的。

正如你可以想象的那样，两边都是灰色的。

出于某种原因，当我设置这些颜色时，灰色也在容器中！

有人可以查看我的代码，看看你是否能找到我出错的地方？

CSS

html, body{
    margin:0;
    padding:0;
    font-size: 0.95em;
    color:#333333;
    font-family: 'PT Sans', sans-serif;
    background-color:grey;
}

#container{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    padding:0 5px;
}

HTML

<body>  
    <div id="container">

    </div>
</body>

Answer 1

将height定义到#coantainer或在其中写一些内容。现在，容器height的{{1}}为DIV

选中此http://jsfiddle.net/VxWFz/

Answer 2

您需要在html，body选择器中添加维度：

html, body{
    margin:0;
    padding:0;
    font-size: 0.95em;
    color:#333333;
    font-family: 'PT Sans', sans-serif;
    background-color:grey;
    height: 100%;
    width: 100%;
}

否则，身体的宽度与容器div的宽度相同，并且会放在两侧......可以这么说。

还要在容器div中添加一些内容或实际高度以使其正常工作。：）

Answer 3

那是因为您的容器div中没有内容。要么添加一些内容，要么给它一些height。

Working Example

Answer 4

将高度分配给＆＃34;＃container＆＃34;或者用一些内容填充#container div。否则更改背景颜色 - 灰色。

html, body{
    margin:0;
    padding:0;
    font-size: 0.95em;
    color:#333333;
    font-family: 'PT Sans', sans-serif;
    background-color:red;
}

#container{
    width:960px;
    height: 100px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    padding:0 5px;
}

你好，世界！

Answer 5

试试这个

  <style type="text/css">
  html, body{
    margin:0;
    padding:0;
    font-size: 0.95em;
    background:#FFF;
    font-family: 'PT Sans', sans-serif;
    background-color:grey;
}

#container{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    background-color:#fff;
    padding:0 5px;
}

  </style>

    <div id="container">
    urpis, sagittis ut vut ut augue diam est ac augue, adipiscing dolor. Auctor ut nunc dolor amet sagittis a quis ac, massa nec in? Egestas magnis in tempor. Porttitor pulvinar tincidunt aliquet eu auctor elementum augue, in pellentesque ac pulvinar tempor augue, tempor nisi vut eros.
    </div>

Answer 6

我的容器上没有高度...... 你可以尝试一下 - 它对我来说很好看：
<html> <style> html, body { margin:0; padding:0; font-size: 0.95em; color:#333333; font-family: 'PT Sans', sans-serif; background-color:grey; } #container{ width:960px; margin-left:auto; margin-right:auto; background-color:white; padding:0 5px; } </style> <body> <div id="container"> test </div> </body> </html>

您正在尝试使用哪种浏览器？

Answer 7

尝试使用此代码而不是代码

#container{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    background-color:white !important;
    padding:0 5px;
}

背景颜色问题

7 个答案:

Working Example