本文旨在解决如何使 CSS Grid 容器占据整个屏幕的问题。通过设置 body 和 Grid 容器的 min-height 属性为 100vh，可以确保 Grid 容器的高度延伸至视口高度，从而实现全屏显示效果。本文将提供详细的步骤和示例代码，帮助开发者轻松掌握这一技巧。
在使用 CSS Grid 布局时，有时我们需要 Grid 容器占据整个屏幕，即全屏显示。 默认情况下，body 元素只会根据其内容的高度进行扩展，而 Grid 容器也会受到 body 元素高度的限制。为了实现全屏效果，我们需要显式地设置 body 和 Grid 容器的高度。
解决方案
关键在于使用 min-height: 100vh 属性。vh 单位代表视口高度（viewport height），100vh 表示元素的高度等于视口的高度。 通过将 body 和 Grid 容器的 min-height 设置为 100vh，我们可以确保它们至少占据整个屏幕的高度。
立即学习“前端免费学习笔记（深入）”；
代码示例
假设我们有以下 HTML 结构：
Grid Fullscreen 123123456
以及以下 CSS 代码：
Angel工作室企业网站管理系统全DIV+CSS模板，中英文显示，防注入sql关键字过滤，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。内置IIS测试，双击打启动预览网站 Angel工作室企业网站
.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;
}要使 Grid 容器 .wrapper 全屏显示，我们需要添加以下 CSS 规则：
body,
.wrapper {
min-height: 100vh;
margin: 0; /* 移除 body 默认的 margin，防止出现滚动条 */
}解释
- body, .wrapper { min-height: 100vh; }： 这条规则将 min-height: 100vh 应用于 body 元素和 .wrapper 容器。 这意味着它们的高度至少等于视口的高度。
- margin: 0;：这条规则移除了 body 元素默认的 margin。 默认情况下，body 元素会有一些 margin，这可能会导致出现滚动条，影响全屏显示效果。
完整代码
Grid Fullscreen 123123456
注意事项
- 确保 body 元素没有默认的 margin 或 padding，否则可能会导致出现滚动条，影响全屏效果。可以使用 margin: 0; padding: 0; 来重置这些样式。
- 如果页面中还有其他元素需要占据剩余的高度，可以使用 flexbox 或 grid 布局来实现。
- 在某些情况下，可能需要使用 JavaScript 来动态计算视口高度，以便更好地适应不同的设备和浏览器。
总结
通过将 body 和 Grid 容器的 min-height 设置为 100vh，可以轻松实现 CSS Grid 容器的全屏显示效果。 这种方法简单有效，并且兼容性良好，适用于各种现代浏览器。 记得移除 body 默认的 margin，以避免出现不必要的滚动条。
