Question

我正在尝试重构我的CSS，结合冗余元素并修剪不必要的代码（我正在开设一个专注于创建基于Web的混合应用程序的移动应用程序课程;使用HTML5，CSS和JavaScript。因此，代码必须被重构）。我原来的是：

body
{
    width: 400px;
    border: solid;
}

header, footer
{
    background-color: #ADDFFF;
}

.buttons
{
    width: 400px;
    text-align: center;
    background-color: #ADDFFF;
}

哪个会使用这样的HTML结构：

<BODY>
   <header>
   </header>
   <div class="buttons">
   </div>
   <footer>
   </footer>
</BODY>

我尝试将 background-color: #ADDFF; 添加到正文CSS中并删除所有其余的 background-color 引用。当我这样做时，整个页面成为我设置的颜色;这是我一半的预期。无论如何，没有多余的CSS元素使用，将主体的背景设置为仅包含页面显示的区域？

简单/ TL; DR版本：

我试图让页面的整个背景颜色相同。目前只是样式化标记会导致整个背景（也在我的页面之外）被着色。

Answer 1

您可以为bakground-color元素设置不同的html。这会迫使身体只影响其内容而不影响整个页面。

html
{
    background-color: #ffffff;
}

body
{
    width: 400px;
    border: solid;
    background-color: #ADDFFF;
}

.buttons
{
    width: 400px;
    text-align: center;
}

以及http://jsfiddle.net/gaby/SsFsS/

的工作演示

Answer 2

你可以做的是在包含标题，内容和页脚的div中包围所有内容。使其成为您希望页面的高度应该由内容填充的高度。然后制作你想要的颜色背景。

<BODY>
    <div id="container">
       <header>
       </header>
       <div class="buttons">
       </div>
       <footer>
       </footer>
    </div>
</BODY>

因此容器不会是页面的整个宽度。它只会与内容一样宽。

这是一个例子http://jsfiddle.net/pRwMn/1/

因此，您可以设置默认背景，然后根据需要更改所有其他元素的背景

Answer 3

怎么样

body > * { background-color: #ADDFFF; }

Answer 4

<header> and <footer>只是指导原则，与<body>

的效果不同

你需要做的是如下所示。

body
{
    width: 400px;
    border: solid;
}

header, footer
{
    background-color: /* change here as necessary */;
}

.buttons
{
    width: 400px;
    text-align: center;
    background-color: /* change here as necessary */;
}

#container 
{
    background-color: #addfff;
}

然后你的html文档应该是这样读的

<BODY>
   <header>
   </header>
   <div id="container">
      <div class="buttons">
      </div>
   </div>
   <footer>
   </footer>
</BODY>

CSS背景颜色问题

4 个答案: