图片动画在中途停止

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和其他关键字。