Typecho主题插件站
每一个作品都值得被记录

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

Typecho爱好者开发日志 • 246次浏览 • 发布 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

img

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

img

img

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

本文检索关键词:开发日志
厂商投放
添加新评论 »