Question

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

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

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

html, body {
    height: 100%;
}

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

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

奇怪的是，如果您将我的网站徽标（具有与旋转变换相关的过渡动画）鼠标悬停，则背景会正确地更改其颜色。我认为与网站刷新相关的东西。

顺便说一下，身体的颜色也随着过渡而变化，但如果需要，可以在检查器上断开它。这似乎不是问题所在。

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

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

Answer 1

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

我将所有部分放在名为“main-content”（网站）的div中。然后我还用高度定义了这个div：100％（否则高度技巧停止工作）。然后我用这个css定义一个pre pseudutlement：

#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;
}

然后我将所有更改的背景颜色代码附加到此固定层伪元素，而不是使用正文。这有效，但固定元素和移动浏览器不是好朋友。所以我认为这个问题值得一个更好的解决方案。

更改身高的背景颜色：100％

1 个答案: