让一个div铺满整个页面：

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

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

三、实现过程：

1、第一种实现方法：（看下面的代码）

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

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

2、第二种实现方法：（看下面的代码）

说明： a、首先设置 html 和 body 的 width 和 height 为 100% ，然后在设置div的 width 和 height 为 100% 即可 b、之后还是要 CSS Reset 就可以了。

3、第三种实现方法：（看下面的代码）

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

有关CSS的计量单位 vh 和 vw 的简介：

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

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

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

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