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

使用 CSS Grid 实现页面全屏布局

DDD

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

原创

473人浏览过

使用 css grid 实现页面全屏布局

本文将介绍如何使用 CSS Grid 布局来实现网页的全屏显示效果。通过设置 min-height 属性，并结合 vh 单位，可以确保 Grid 容器和 body 元素占据整个视口的高度，从而实现全屏布局。本文将提供详细的代码示例和解释，帮助你轻松掌握这一技巧。

要让 CSS Grid 容器占据整个页面的大小，关键在于理解浏览器默认的行为和如何覆盖它。默认情况下，body 元素的高度只会根据其内容进行调整。因此，我们需要显式地设置 body 和 Grid 容器的高度。

核心思路：

设置 body 和 Grid 容器的最小高度为 100vh。vh 单位代表视口高度，100vh 表示占据整个视口的高度。
确保 html 元素也占据整个视口高度。

具体实现：

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

以下是一个示例 HTML 结构：

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="first">123</div>
    <div class="second">123456</div>
  </div>
</body>
</html>

登录后复制

以及对应的 CSS 样式：

html, body {
  height: 100%; /* 确保html也占据整个视口高度 */
  margin: 0; /* 移除默认的 body margin */
}

body, .wrapper {
  min-height: 100vh; /* 设置最小高度为视口高度 */
}

.wrapper {
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    'a a a'
    'a a a'
    'b b b';
}

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

.second {
  grid-area: b;
  background-color: red;
}

登录后复制

代码解释：

html, body { height: 100%; margin: 0; }：这段代码确保 html 和 body 元素占据整个视口高度，并移除 body 默认的 margin，防止出现滚动条。
body, .wrapper { min-height: 100vh; }：这段代码设置 body 和 .wrapper 元素的最小高度为 100vh，强制它们占据整个视口的高度。
其余代码定义了 Grid 布局的结构和样式。

注意事项：