圖片動畫在中途停止

Question

確定要在標題中寫什麼，所以很抱歉，如果它誤導某人。

在之前的帖子中，我問過如何讓一個div在兩個日期間可見，我得到的答案是作品，但那不是問題。現在我想要相同的div（和它使用的圖片）具有相同的頁面高度。高度設置爲100％，但這只是使圖片100％，而不是它自己的div。這使得圖片（動畫）中途停下來，看起來很愚蠢。

如何根據頁面高度自動調整高度？

CSS：

#snow{ 
    background: none; 
    font-family: Androgyne; 
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index:9999; 
    pointer-events: none; 
    -webkit-animation: snow 10s linear infinite; 
    -moz-animation: snow 10s linear infinite; 
    -ms-animation: snow 10s linear infinite; 
    animation: snow 10s linear infinite; 
} 
@keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-moz-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} 
} 
@-webkit-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-ms-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 

@media all and (max-width: 1024px) { 
    #snow { 
    display:none; 
    } 
} 

@media all and (max-width: 720px) { 
    #snow { 
    display:none; 
    } 
} 

使用id="snow"顯示雪花效果

<div id="snow"></div> 

爲了更容易理解，繼承人codepen http://codepen.io/Volcan3/pen/ENPpPN

Answer 1

height: 100%實際上意味着這個元素的高度設置爲它的100％包含元素。

你可以閱讀細節here：

的比例相對於所生成的框的包含塊的高度計算。如果未明確指定包含塊的高度（即，它取決於內容高度），並且該元素沒有被絕對定位，則該值計算爲自動。根元素上的百分比高度與初始包含塊相關。

你應該確保你的<div id="snow"></div>塊的父元素是正確的樣式。

如果這不能解決您的問題，請隨時發表評論。

UPDATE：

與您的代碼的問題是：

的#snow父元素是.snow-wrapper的.snow-wrapper父是body。

#snow的風格position: absolute; height: 100%，你打算從.snow-wrapper的高度計算出來。

讓我們看看.snow-wrapper。它有風格height:100%;。但是，它不是絕對定位的，它的父級（body）沒有明確設置的高度。

如果未明確指定包含塊的高度（即，它取決於內容高度），並且此元素未被絕對定位，則該值計算爲auto。

你應該檢查.snow-wrapper並且會發現它的計算高度爲0。

使這個codepen實例工作的一種方法是使身體相對定位。

// From: 
body { background-color:#333; } 
// To: 
body { background-color:#333; position:relative; } 

這只是一個權宜之計。

您應該對相關主題做更多的研究。在Google上嘗試使用document flow,flex layout,clearfix和其他關鍵字。