Question

我知道这不是一个新问题，但是无论我做什么，我都无法将网格填满整个屏幕。该页面非常短，位于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都保留了填充，即使布局检查器显示边距和填充为零。

页面的滚动条是否无法实现全屏显示？

Answer 1

在html和body上使用高度100％。在页面包装程序（＃page-group）上使用最小高度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网格无法填充屏幕

1 个答案: