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

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

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

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

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

html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>全屏图片</title>
    <link rel="stylesheet" href=http://www.cppcns.com/web/css/"http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    


    
.fullbg { position: relative; width: 100vw; height: 100vh; background-position: center center; background-size: cover; background-repeat: no-repeat; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

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

扫一扫手机访问