更改身高與身高的背景顏色：100％

我的個人網站存在一個奇怪的問題。讓我解釋一下上下文：更改身高與身高的背景顏色：100％

我有一些堆疊的部分必須（每個）與瀏覽器窗口高度相同。也就是說，如果瀏覽器窗口的高度爲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中都可以正常工作。因此，如果您願意，請比較兩種瀏覽器以更好地瞭解問題。

來源

2014-01-31 davidgnin

據我瞭解，由於所有的容器都與身體高度相同，所以身體很有可能被它們重疊。 –

是的，它發生了。但在Firefox中，這不是問題。由此產生的行爲是非常奇怪的。如果Chrome瀏覽器在滾動時繼續使用顏色繪製背景，爲什麼它無法更改此顏色？ – davidgnin

我部分地解決了僞元素的問題（然後，我不會失去我的html的語義），但我不滿意，因爲我認爲它必須是更好更乾淨的方式。

我把所有部分放在一個名爲「主要內容」（網站）的div內。然後我還用高度定義了這個div：100％（否則高度技巧停止工作）。然後我定義了一個前pseudoelement與此CSS：

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

然後我連接到該固定層pseudoelement所有的改變背景顏色的代碼，而不是使用體。這可行，但固定元素和移動瀏覽器不是好朋友。所以我認爲這個問題值得更好的解決方案。

來源

2014-01-31 11:14:02 davidgnin

更改身高與身高的背景顏色：100％

回答

相關問題