Typecho Wiki
每一个作品都值得被记录

Css实现DIV铺满屏幕的几种方法

Typecho维基君Typecho教程 • 795次浏览 • 发布 2023-11-02 • 更新 2023-11-02
极致加速的V2Ray 助您畅享全球网络 & 搬瓦工VPS最新优惠码
  1. 第一种方式
div{    /* div的CSS样式 */
    position : absolute;
    width : 100%;
    height : 100%;
}
*{        /* CSS Reset */
    margin : 0;
    padding : 0;
}

a、 给整个div设置一个绝对定位,然后给该div的 width 和 height 都设置成 100% 就可以了。
b、 此时设置完以后发现页面上方和左侧分别有 8px 的神秘边距(元素自带),哈哈,可以通过CSS Reset解决。
c、 如果有 同等级的 div也做了铺满(即body中有两个div都使用了这种方式),那么后面的元素会 覆盖 掉之前的元素。

2.第二种方式

html, body {
    width: 100%;
    height: 100%;
}
div {
    background-color: red;
    height: 100%;
    width: 100%;
}
* {
    margin: 0;
    padding: 0;
}

a、首先设置 htmlbodywidthheight100% ,然后在设置div的 widthheight100% 即可
b、之后还是要 CSS Reset 就可以了。

3.第三种方式

div {
    background-color: red;
    width:100vw;
    height:100vh; 
}
* {
    margin: 0;
    padding: 0;
}

a、给div的 width 是设置为 100vw,div的 height 设置为 100vh(下面有关于 vw 和 vh 的简单说明)。
b、之后还是要 CSS Reset 就可以了

什么是 CSS Reset

Css实现DIV铺满屏幕的几种方法

介绍下几种单位长度的区别

Css实现DIV铺满屏幕的几种方法

Css实现DIV铺满屏幕的几种方法

通过上面我们就可以了解到,为什么我们上面第三种实现中设置 width 和 height 为 100vw 和 100vh 就可以实现 铺满 整个屏幕。

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,Typecho.Wiki所有文章均包含本声明。
本文检索关键词:Typecho教程
厂商投放

【腾讯云】🎉五一云上盛惠!云服务器99元/月续费同价!

腾讯云五一劳动节海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!

广告
添加新评论 »