在以下HTML中,我手动将中间div的高度设置为200px。如何自动调整高度以使div的高度等于浏览器中可见区域的高度?这可以用纯CSS完成还是需要JavaScript?将div的高度设置为基于可见区域
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
而CSS:
.parallax {
/* The image used */
background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
/* Set a specific height */
height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.red {
height:1000px;
background-color:red;
color:white;
font-size: 40px;
}
工作呢例子可以发现here。
使用100vh(VH单元是视口的高度)为在CSS的高度。 100是告诉它是100的视口高度。你也有宽度的vw。 – creativekinetix
浏览器支持'vh':http://caniuse.com/#feat=viewport-units – Sebastian
它得到了相当广泛的支持。即使在IE中,你也只是在vmax单位上失利。还有其他的错误与打印和3d转换等有关,但我认为这不是什么大问题。 – creativekinetix