本文将介绍如何使用 CSS Grid 布局来实现网页的全屏显示效果。通过设置 min-height 属性，并结合 vh 单位，可以确保 Grid 容器和 body 元素占据整个视口的高度，从而实现全屏布局。本文将提供详细的代码示例和解释，帮助你轻松掌握这一技巧。
要让 CSS Grid 容器占据整个页面的大小，关键在于理解浏览器默认的行为和如何覆盖它。默认情况下，body 元素的高度只会根据其内容进行调整。因此，我们需要显式地设置 body 和 Grid 容器的高度。
核心思路：
- 设置 body 和 Grid 容器的最小高度为 100vh。vh 单位代表视口高度，100vh 表示占据整个视口的高度。
- 确保 html 元素也占据整个视口高度。
具体实现：
立即学习“前端免费学习笔记（深入）”；
以下是一个示例 HTML 结构：
仿虎嗅网在线视频教育门户源码2.0
下载
仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。
Full Screen Grid 123123456
以及对应的 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 布局的全屏显示效果。这种方法简单有效，适用于各种需要全屏布局的网页应用。
