Html 为什么内容获胜'；你不需要不同的背景色吗？

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

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

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

#content {
  background-color: blue;
}

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

JSFIDLE链接如下：

---

此外，如果有人对代码有其他批评，我们将不胜感激。

您需要在内容规则中添加

overflow:auto

，因为孩子是浮动的。浮动它们本质上会将它们从正常流中移除，并折叠父级，因为它的行为就像没有内容一样。添加溢出规则将恢复您寻求的行为

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

内容div中的元素左右浮动，因此div没有高度（

0px

），您可以通过添加以下代码在css中解决此问题

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

或者在html中，在#content元素结束之前添加以下代码

---

这将清除任何浮动，您的代码应该可以正常工作。祝你好运

请发布你的HTML。在这种情况下，jsFiddle.net示例通常很有用。它有任何内容吗？试着给你的#页面包装增加一个高度。你需要发布你的html或者提供更多细节，因为你发布的代码看起来应该可以工作。我确实记得读过这篇文章。它确实解决了部分问题，但是蓝色部分在内容的一半左右停止了。你有没有想过为什么？因为你在一些子元素上使用了绝对定位的方式。那么解决方法是什么呢？完全避免绝对定位？除此之外还有其他方法吗？有很多种方法来布局内容，所以我不能告诉你怎么做，只是绝对定位导致了你评论中的问题。

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