制作一个 div 全屏 css

在网页布局中，经常会遇到需要让某个元素全屏的情况，这时我们可以通过 CSS 来实现。以下是实现全屏 div 的几种方法。

1. 使用 vh 和 vw

vh 和 vw 是 CSS 中的相对长度单位，表示占据 viewport 视口宽度和高度的百分比。因此，我们可以通过设置 div 的宽高为 100vw 和 100vh 来实现全屏效果。

示例代码：

.full-screen {
  width: 100vw;
  height: 100vh;
}

2. 使用绝对定位

我们可以将 div 的位置设置为绝对定位，然后通过设置 top、right、bottom 和 left 属性将其拉满。

示例代码：

.full-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

3. 使用 Flexbox

Flexbox 是 CSS 中用于网页布局的弹性盒子模型，可以方便地实现元素的对齐和分布。我们可以将 body 元素设为 Flex 容器，然后让要全屏的 div 元素通过设置 flex 属性来充满整个容器。

示例代码：

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.full-screen {
  flex: 1;
  max-width: 100%;
  max-height: 100%;
}

4. 使用 Grid

除了 Flexbox，我们也可以使用网格布局来实现全屏效果。与 Flexbox 不同的是，网格布局是基于网格（grid）的，可以更方便地进行水平和垂直方向上的控制。

示例代码：

body {
  display: grid;
  place-items: center;
}

.full-screen {
  grid-area: 1 / 1 / -1 / -1;
}

以上就是几种实现全屏 div 的方法，可以根据需求选择其中一种适合自己的。