您现在的位置是：网站首页> 编程资料编程资料

详解CSS3原生支持div铺满浏览器的方法

2023-10-20 268人已围观

简介这篇文章主要介绍了详解CSS3原生支持div铺满浏览器的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示：

随着鼠标的滚动，整个图片也滚上去了。

以前为了达到这样的等高效果，一般通过js来获取当前浏览器高度然后动态设置div的height，有时候还需要不断地检测浏览器resize事件来不断调整div的height。

其实CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果，完全可以抛弃js了！

html代码如下:

全屏图片我就是这么