更改身高的背景色：100％

Question

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

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

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

html, body {
    height: 100%;
}

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

但是之后，我希望主体的背景颜色根据我们所处的区域而变化。 这会导致一个奇怪的问题。 颜色不会以逻辑方式改变。 最好在我的网站上看到它。 这似乎与身体实际上比我的网站小这一事实有关。 请记住，我的身体有100％的身高（例如500px），而我的网站是100％*部分数（2500px）。 但是我对此不太确定，因为我试图用简单的提琴来重现错误，但我做不到。

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

顺便说一下，主体的颜色也会随着过渡而变化，但是您可以根据需要在检查器上断开它的连接。 这似乎不是问题。

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

PS：这发生在Chrome 32上。在Firefox中可以正常使用。 因此，如果需要，可以比较两个浏览器以更好地理解问题。

Answer 1

我用伪元素部分地解决了问题（然后，我没有失去html的语义），但我不满意，因为我认为它必须是一种更好，更干净的方法。

我将所有部分都放在一个称为“网站的主要内容”的div中。 然后，我还将这个div的高度定义为：100％（否则，高度提示将停止工作）。 然后，我用此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。 这可行，但是固定元素和移动浏览器不是好朋友。 因此，我认为这个问题值得更好的解决。