Question

我将整个页面设置为灰色作为背景颜色，但是只希望将内容区域设置为不同的颜色。根据我的CSS，这应该发生，但事实并非如此。为什么不呢？

html,
body {
  background-color: #FAFAFA;
}

#page-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 1024px;
}

#content {
  background-color: blue;
}

好吧，好吧，我认为可能有一个明显的答案，因为这是我的代码的一个非常精简的版本。是的，它有内容，页面包装器中有东西。

jsfiddle链接在这里：http://jsfiddle.net/2pzo80Lu/

此外，如果有人对该代码提出批评，那将非常感激。

Answer 1

您需要在#content规则中添加overflow:auto，因为子项已浮动。浮动它们会将它们从正常流中移除并折叠父项，因为它表现得好像没有内容。添加溢出规则可恢复您寻找的行为。

#content {
    background-color: blue;
    overflow:auto;
}

<强> jsFiddle example

Answer 2

#content div中的元素是左右浮动所以div没有高度（0px），你可以通过添加以下代码在css中解决这个问题

#content {
    background-color: blue;
    overflow:auto;
}

或在html中通过在#content

元素关闭之前添加以下代码

<div style="clear:both;"></div>

这将清除任何浮动，你的代码应该非常有效。祝你好运

为什么内容不会采用不同的背景颜色？

2 个答案: