Html 随高度更改主体的背景颜色：100%

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

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

如果我只是用

height:100%

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

html, body {
    height: 100%;
}

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

但在那之后，我希望身体的背景颜色根据我们所在的部位而变化。这导致了一个奇怪的问题。颜色不会以合乎逻辑的方式变化。最好在电视上看。这似乎与身体实际上比我的网站小这一事实有关。记住，我的身体有100%的高度（例如，500px），我的网站有100%的节数（2500px）。但我不是很确定，因为我试图重现错误，但我做不到

一件奇怪的事情是，如果你将鼠标移到我的网站徽标（它有一个与旋转变换相关的过渡动画）上，背景会正确地改变颜色。我想是和网站刷新有关的

顺便说一下，身体的颜色也会随着过渡而改变，但如果需要，可以在inspector上断开连接。这似乎不是问题所在

如果你需要更多的信息，请询问。谢谢你的帮助和关注

---

PS：这发生在Chrome32上。在Firefox中，一切都可以。因此，如果您愿意，请比较两种浏览器以更好地理解问题。

我使用伪元素部分解决了问题（这样，我就不会丢失html的语义），但我并不满意，因为我认为这必须是一种更好、更干净的方式

我把所有部分放在一个名为“主要内容”（网站的）的div中。然后我还用height:100%定义了这个div（否则height技巧将停止工作）。然后我用这个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。这是可行的，但固定元素和移动浏览器不是好朋友。因此，我认为这个问题应该得到更好的解决。

据我所知，由于所有容器都与身体高度相同，身体很有可能被它们重叠。是的，确实如此。但在Firefox中，这不是问题。由此产生的行为非常怪异。如果Chrome在滚动时一直使用颜色绘制背景，为什么它不能更改此颜色？