更改身高的背景色：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。 這可行，但是固定元素和移動瀏覽器不是好朋友。 因此，我認為這個問題值得更好的解決。