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、首先设置 html
和 body
的 width
和 height
为 100%
,然后在设置div的 width
和 height
为 100%
即可
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
介绍下几种单位长度的区别
通过上面我们就可以了解到,为什么我们上面第三种实现中设置 width 和 height 为 100vw 和 100vh 就可以实现 铺满 整个屏幕。
版权声明:本文为CSDN博主「你好像很好吃a」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44296929/article/details/102856323
标签:Reset,100%,铺满,height,width,CSS,DIV,div,Css From: https://www.cnblogs.com/alannero/p/16954641.html