【前端】用CSS实现div全屏铺满的方式

作者：System 时间：2024年08月21日分类：所有,css 字数：562

要使用CSS让一个div全屏铺满，可以使用vh（viewport height）和vw（viewport width）单位，或者设置position属性和width、height属性。以下是两种方法的示例代码：

方法1：使用vh和vw单位




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

方法2：使用绝对定位和100%的宽高




.fullscreen-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在HTML中，只需将div的class设置为对应的全屏类名即可：




<div class="fullscreen-div"></div>

请注意，当使用绝对定位时，div的父元素应该有相对定位（position: relative;），否则div会相对于初始包含块（initial containing block）定位。如果父元素已有相对定位，则不需要额外设置。