本文将介绍如何使用 CSS Grid 布局来实现网页的全屏显示效果。通过设置 min-height 属性，并结合 vh 单位，可以确保 Grid 容器和 body 元素占据整个视口的高度，从而实现全屏布局。本文将提供详细的代码示例和解释，帮助你轻松掌握这一技巧。
要让 CSS Grid 容器占据整个页面的大小，关键在于理解浏览器默认的行为和如何覆盖它。默认情况下，body 元素的高度只会根据其内容进行调整。因此，我们需要显式地设置 body 和 Grid 容器的高度。
核心思路：
- 设置 body 和 Grid 容器的最小高度为 100vh。vh 单位代表视口高度，100vh 表示占据整个视口的高度。
- 确保 html 元素也占据整个视口高度。
具体实现：
立即学习“前端免费学习笔记（深入）”；
以下是一个示例 HTML 结构：
<!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 布局的结构和样式。
注意事项：
- 确保在 html 元素上也设置了 height: 100%;，否则 body 元素的高度可能会受到限制。
- 移除 body 元素的默认 margin，以避免出现不必要的滚动条。
- min-height 属性确保元素至少占据指定的高度，但如果内容超出该高度，元素会自动扩展。
总结：
通过设置 html 和 body 的高度为 100%，并设置 body 和 Grid 容器的 min-height 为 100vh，可以轻松实现 CSS Grid 布局的全屏显示效果。这种方法简单有效，适用于各种需要全屏布局的网页应用。
