本文旨在解决如何使 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 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Fullscreen</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 代码：
.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，这可能会导致出现滚动条，影响全屏显示效果。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Fullscreen</title>
<style>
body,
.wrapper {
min-height: 100vh;
margin: 0;
}
.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 {
background-color: red;
grid-area: b;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="first">123</div>
<div class="second">123456</div>
</div>
</body>
</html>注意事项
- 确保 body 元素没有默认的 margin 或 padding，否则可能会导致出现滚动条，影响全屏效果。可以使用 margin: 0; padding: 0; 来重置这些样式。
- 如果页面中还有其他元素需要占据剩余的高度，可以使用 flexbox 或 grid 布局来实现。
- 在某些情况下，可能需要使用 JavaScript 来动态计算视口高度，以便更好地适应不同的设备和浏览器。
总结
通过将 body 和 Grid 容器的 min-height 设置为 100vh，可以轻松实现 CSS Grid 容器的全屏显示效果。 这种方法简单有效，并且兼容性良好，适用于各种现代浏览器。 记得移除 body 默认的 margin，以避免出现不必要的滚动条。
