html,body { height: 100%; } div { height: 100vh; }
以上代码中,大家首先将html和body元素的高度设置为100%,这样可以确保大家设置的元素的高度值是相对于整个窗口的高度计算的。接着大家将目标元素(本例中使用的是div元素)的高度设置为100vh,vh代表viewport height,即可视口的高度。
使用以上代码,就可以将目标元素的高度设置为窗口的高度了,而且不管窗口大小如何变化,元素的高度都会自动适应。这个方法可以用来实现全屏背景或全屏滚动等效果。