CSS 实现一个div铺满整个屏幕的三种方法（CSS Reset）

让一个div铺满整个页面：

一、需求描述：
比如说我们现在有一个页面，页面中有一些文字，但是页面需要添加背景，并且整个页面要被背景铺满。

二、问题描述：
其实我们可以在body中添加一个div，然后设置这个div的height为auto，然后给整个div添加一个background，那么如果该div的内容足够多的话，该div就会铺满整个页面（即：整个页面都被添加的背景铺满），但是如果该div的内容不够多的话，那么页面就不会被整个div铺满，如果设置固定的高的话，就不会适配，height设置太小还是不会铺满，height设置太大就很有可能超出整个页面的height，那么手机页面就会出现滑动效果，这不是我们想要的，那么怎么实现呢。

三、实现过程：

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都使用了这种方式），那么后面的元素会 覆盖 掉之前的元素。

什么是 CSS Reset呢？（下面是网上的一些关于Css Reset的问题以及解释，可以简单的看看，方便理解：）

---

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的计量单位 vh 和 vw 的简介：

a、首先说下我们常用的单位：了解更多有关CSS的长度单位

单位	说明
px	像素，我们再网页布局中最常用的一个单位
%	百分比，一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常被用到

b、viewport：可视窗口，也就是浏览器。 更多关于vh和vw

单位	说明
vw	可视窗口（Viewport）的宽度，1vw等于viewport宽度的1%
vh	可视窗口（Viewport）的高度，1vh等于viewport高度的1%
通过上面我们就可以了解到，为什么我们上面第三种实现中设置 width 和 height 为 100vw 和 100vh 就可以实现 铺满 整个屏幕。

上面就是有关div铺满整个屏幕的内容，希望可以帮助到你，如果喜欢请留个赞支持一下，谢谢，同时也欢迎在评论区指出问题所在或进行交流，我会第一时间回复，再次感谢。