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>

为了更容易理解，这是一个代码http://codepen.io/Volcan3/pen/ENPpPN

Answer 1

height: 100%实际上意味着将此元素的高度设置为包含元素的100％。

您可以阅读详细信息here：

百分比是根据生成的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为auto。根元素的百分比高度相对于初始包含块。

您应该确保<div id="snow"></div>块的父元素设置正确。

如果这不能解决您的问题，请随时发表评论。

更新：

您的代码存在问题：

#snow的父元素为.snow-wrapper，.snow-wrapper的父元素为body。

#snow的样式position: absolute; height: 100%，您打算从.snow-wrapper的高度计算出来。

让我们看一下.snow-wrapper。它有样式height:100%;。但是，它并不是绝对定位的，它的父级（body）没有明确设置的高度。

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则该值将计算为auto。

你应该检查.snow-wrapper，并发现它的计算高度为0。

使这个codepen实例工作的一种方法是使body相对定位。

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

这只是一个快速修复。

您应该对相关主题进行更多研究。在Google上尝试document flow，flex layout，clearfix和其他关键字。

图片动画在中途停止

1 个答案: