实现全屏div的多种方法

在Web开发中，要实现一个铺满全屏的div，很多人可能会觉得只需要设置宽度和高度为100%即可，但实际上这并不是铺满全屏的最优解。下面，我们将从多个方面讲述如何实现一个真正意义上的div铺满全屏。

一、使用CSS根元素

使用CSS根元素可以使div全屏幕占比，达到全屏的效果。

html, body, .fullscreen-div {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

以上代码中，我们将HTML的根元素和body元素的高度和宽度都设置为100%。然后，给待铺满全屏的div添加一个类名fullscreen-div，并把该元素的高度和宽度都设置为100%。

二、使用绝对布局

将div元素的position属性设置为absolute，再将top、bottom、left、right分别设置为0，可以让div元素铺满整个屏幕。

.fullscreen-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

这样设置之后，.fullscreen-div元素会跟随其父级元素进行自适应偏移，从而达到铺满全屏的效果。

三、使用vh单位设置高度

除了使用CSS根元素和绝对定位外，还可以使用CSS3的新特性vh（视口高度）来设置元素的高度。

.fullscreen-div {
  height: 100vh;
  width: 100%;
}

vh单位将元素的高度设置为视口高度的百分比。因此，以上代码中我们将元素的高度设置为100vh，宽度设置为100%即可铺满全屏。

四、使用flex布局

使用flex布局可以快速实现一个铺满全屏的div。首先，使用display:flex将父容器设置为flex容器，再将子元素的宽度和高度都设置为100%即可。

.fullscreen-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.fullscreen-child {
  width: 100%;
  height: 100%;
}

以上代码中，我们将父容器的高度设为100vh，然后使用了align-items和justify-content属性来进行垂直和水平居中。子元素则只需要将宽度和高度都设置为100%即可铺满全屏。

五、使用grid布局

最后，我们还可以使用CSS3的grid布局快速实现一个铺满全屏的div。只需要将父容器的display属性设置为grid，再将子元素的网格列和网格行都设置为1即可。

.fullscreen-parent {
  display: grid;
  height: 100vh;
}
.fullscreen-child {
  grid-row: 1 / span 1;
  grid-column:1 / span 1;
}

以上代码中，使用了grid-row和grid-column来设置子元素在网格中所占的行和列，从而实现了铺满全屏的效果。