使用 CSS Grid 实现全屏布局-html教程-PHP中文网

使用 CSS Grid 实现全屏布局

花韻仙語

发布： 2025-09-11 19:51:01

原创

270人浏览过

使用 css grid 实现全屏布局

本文介绍了如何使用 CSS Grid 布局创建一个占据整个浏览器窗口的容器。通过设置 body 和 Grid 容器的最小高度为 100vh，可以确保 Grid 布局充满整个视口的高度，从而实现全屏布局效果。

在使用 CSS Grid 布局时，有时我们需要 Grid 容器能够占据整个屏幕，也就是实现全屏布局。这在创建单页应用、全屏展示页面等场景中非常常见。默认情况下，HTML body 元素的高度只会根据其内容进行调整。因此，即使你设置了 Grid 容器的宽度为 100%，它也可能不会充满整个屏幕的高度。

为了解决这个问题，我们需要同时设置 body 和 Grid 容器的最小高度为 100vh。vh 单位代表视口高度（viewport height），100vh 表示占据整个视口的高度。

实现方法：

立即学习“前端免费学习笔记（深入）”；

设置 body 的最小高度：
```
body {
  min-height: 100vh;
  margin: 0; /* 移除 body 默认的 margin */
}
```
登录后复制
我们需要将 body 的 min-height 设置为 100vh，并且为了避免出现滚动条，通常还需要将 body 默认的 margin 设置为 0。

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

设置 Grid 容器的最小高度：

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    'a a a'
    'a a a'
    'b b b';
  min-height: 100vh; /* 设置 wrapper 的最小高度 */
}

登录后复制

将 Grid 容器（在示例中为 .wrapper）的 min-height 也设置为 100vh，确保其能够扩展到整个视口的高度。

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Screen Grid</title>
  <style>
    body {
      min-height: 100vh;
      margin: 0;
    }

    .wrapper {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto auto;
      grid-template-areas:
        'a a a'
        'a a a'
        'b b b';
      min-height: 100vh;
    }

    .first {
      background-color: grey;
      grid-area: a;
    }

    .second {
      grid-area: b;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="first">
      123
    </div>
    <div class="second">
      123456
    </div>
  </div>
</body>
</html>

登录后复制

注意事项：