CSS背景色问题

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; 进入body CSS并删除所有其余的background-color引用。 当我这样做时，整个页面成为我设置的颜色; 这是我一半的预期。 无论如何，在没有多余使用CSS元素的情况下，将主体的背景设置为仅包含页面显示的区域？

Simple / TL; DR版本：

我试图使页面的整个背景颜色相同。 目前只是造型了 标记导致整个背景（也在我的页面之外）被着色。

Answer 1

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

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中包围EVERYTHING。 将其设置为您希望页面宽度的高度，然后由内容填充高度。 然后制作你想要的颜色的背景。

<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 个解决方案

解决方案1
3 已采纳 2012-02-27 23:39:50

解决方案2
0 2012-02-27 23:34:51

解决方案3
0 2012-02-27 23:35:32

解决方案4
0 2012-02-27 23:36:20

CSS背景色问题

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-02-27 23:39:50

解决方案2 0 2012-02-27 23:34:51

解决方案3 0 2012-02-27 23:35:32

解决方案4 0 2012-02-27 23:36:20

解决方案1
3 已采纳 2012-02-27 23:39:50

解决方案2
0 2012-02-27 23:34:51

解决方案3
0 2012-02-27 23:35:32

解决方案4
0 2012-02-27 23:36:20