<分区>
<分区>
我知道这不是一个新问题，但无论我做什么，我都无法让网格填满屏幕。该页面非常短，位于 http://www.hymntime.com/tch/non/lang-idx-chooser.htm。 . 以下是网格规范:
#page-group {
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: auto 1fr;
column-gap: 1em;
width: 100%;
height: 100%;
grid-auto-rows: auto;
}
#page-group-navigation {
grid-column-start : 1;
grid-column-end : 2;
grid-row-start : 1;
grid-row-end : 3;
background-color : aliceblue;
overflow : scroll;
}
.page-group-header {
grid-column-start : 2;
grid-column-end : 3;
grid-row-start : 1;
grid-row-end : 2;
background-color : aliceblue;
margin-right : 2em;
text-align : center;
}
#page-group-content {
grid-column-start : 2;
grid-column-end : 3;
grid-row-start : 2;
grid-row-end : 3;
margin-right : 2em;
}
Firefox、Chrome(桌面和 Android)和 Edge 都保留填充，即使布局检查器显示边距和填充为零。
页面的滚动条会导致无法全屏吗？
最佳答案
在 html 和 body 上使用 100% 高度。在页面包装器 (#page-group) 上使用 min-height 100%，此页面包装器中的所有其他内容。
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choose Language</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#page-group {
min-height: 100%;
}
</style>
</head>
<body>
<div id="page-group">
<div id="page-group-navigation">
</div>
<div id="page-group-content">
</div>
</div>
</body>
</html>
关于CSS 网格不会填满屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57640694/