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

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

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

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

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

ht ML 代码如下:

<!DOCTY PE  html>
<html>
<head>
    < ;m eta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE= Edge ">
    <t IT le>全屏图片</title>
    <link rel="stylesheet"  hr ef="http://cdn.bootcss .COM /bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .fullbg {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-position:  center  center;
             background-size : cover;
            background-repeat: no-repeat;
        }
        .inner-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color:  # fff;
        }
    </style>
</head>
<body>
    <div class="fullbg" style="background -i mage: url('http://s.dgtle.com/portal/201601/08/180115ol7n5o75zy7hm002. jpg ?szhdl=imageview/2/w/1900');">
        <div class="inner-content">
            < h1 >我就是这么屌</h1>
        </div>
    </div>
    <div class="entry-content">
        <p>
            相信方今不再会有人质疑手机仅仅只是一个纯粹的通讯工具，随着移动社交应用日渐成为 生活 中不可缺少的工具，手机的照相功能表现甚至成为了衡量一部手机好坏的关键 指标 。在绝大部分的旗舰级手机 新品 发布会之中，我们经常可以看到各厂商们在介绍自家旗舰级 机型 拍照能力之时自吹自捧得无可匹敌，但我们深知在这些顶级水平的旗舰级手机当中，仍然需要使用真正的实力去决一胜负，而这正是本文的主要 任务 。
        </p>
        <p>
            本文我们选择了四款旗舰机型，当中分别有索尼  xp eria Z5  PR emium 、 苹果  iPhone 6s Plus、  三星  Galaxy S6 Edge+、 谷歌  Nexus 6P。
        </p>
    </div>
</body>
</html>

css核心代码如下

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

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

总结

以上是为你收集整理的详解CSS3原生支持div铺满浏览器的方法全部内容，希望文章能够帮你解决详解CSS3原生支持div铺满浏览器的方法所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于详解CSS3原生支持div铺满浏览器的方法的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201595

更新时间：2023-04-27 阅读：22次