用高度改变身体的背景颜色：100%答案

【问题标题】：Change background-color of a body with height: 100%用高度改变身体的背景颜色：100%
【发布时间】：2014-01-31 20:57:10
【问题描述】：

我的个人网站有一个奇怪的问题。让我解释一下上下文：

我有一些堆叠的部分必须（每个）与浏览器窗口的高度相同。也就是说，如果浏览器窗口的高度为 500px，而我有 5 个部分，则整个网站的高度将是 500*5 = 2500px。

如果我只是用height: 100% 定义我的部分，它们的高度仍然是 0px。为了解决这个问题，我使用了下一个技巧：

html, body {
    height: 100%;
}

这样，部分的容器（主体）也具有浏览器窗口的 100% 高度，因此我的部分现在具有所需的高度。

但在那之后，我希望正文的背景颜色根据我们所在的部分而变化。这会导致一个奇怪的问题。颜色不会以逻辑方式改变。最好在my website 上看到它。这似乎与正文实际上比我的网站小这一事实有关。请记住，我的身体有 100% 的高度（例如，500px）和我的网站 100% * 部分的数量（2500px）。但我不太确定，因为我试图重现错误on a simple fiddle，但我不能。

一个奇怪的事情是，如果您将鼠标悬停在我的网站徽标（具有与旋转变换相关的过渡动画）上，背景会正确更改其颜色。我想这与网站刷新有关。

顺便说一句，body 的颜色也会随着过渡而变化，但如果你愿意，你可以在检查器上断开它。这似乎不是问题。

如果您需要更多信息，请索取。感谢您的帮助和关注。

PS：这发生在 Chrome 32 上。在 Firefox 中一切正常。因此，如果需要，请比较两种浏览器以更好地了解问题。

【问题讨论】：

据我了解，由于所有容器都与body高度相同，所以body很可能被它们重叠。
是的，它发生了。但在 Firefox 中这不是问题。由此产生的行为非常奇怪。如果 Chrome 在滚动时一直用颜色绘制背景，为什么它无法更改这种颜色？

标签： html css

【解决方案1】：

我用伪元素部分解决了这个问题（然后，我不会失去我的 html 的语义），但我并不满意，因为我认为它必须是一种更好、更清洁的方法。

我将所有部分放在一个名为“主要内容”的 div 中（网站的）。然后我还用 height: 100% 定义了这个 div（否则高度技巧停止工作）。然后我用这个css定义了一个before伪元素：

#main-content:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-transition: background-color $speed;
  -moz-transition: background-color $speed;
  -o-transition: background-color $speed;
  -ms-transition: background-color $speed;
  transition: background-color $speed;
}

然后我将所有变化的背景颜色代码附加到这个固定层伪元素上，而不是使用 body。这可行，但固定元素和移动浏览器不是好朋友。所以我认为这个问题值得更好的解决。

【讨论】：