[是否有一种方法可以通过css-grid强制将网格容器扩展到屏幕的末端（请参见下面的代码段，出于可视化的考虑，我在其中使用height: 80vh;作为手动方法）
编辑：我总是可以知道页眉和页脚的高度，然后使用例如grid-template-rows: calc(100vh - ...px);
body {
margin: 0;
}
.header {
height: 100px;
background: #f6eeee;
margin: 5px 0px;
border: 1px solid #cacaca;
padding: 5px;
}
.grid {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-column-gap: 10px;
border: 2px solid #000;
overflow: hidden;
margin: 5px 0px;
border: 1px solid #cacaca;
}
.left {
display: grid;
grid-template-rows: calc(100vh - 2*112px - 2*12px);
/* 100px height + 10px padding + 2px border */
/* 10px margin + 2px border */
overflow: auto;
/* height: 80vh; */
}
.left>div {
height: 40000px;
background: #e7e6de;
padding: 5px;
}
.right {
height: 300px;
background: #e3e7e9;
padding: 5px;
}<body>
<div class="header">whatever relevant</div>
<div class="grid">
<div class="left">
<div>lots of content</div>
</div>
<div class="right">another content</div>
</div>
<div class="header">whatever relevant 2</div>
</body>最简单/最简单的解决方案是flexbox。您也可以将其用于静态页眉/页脚大小或动态，只需更改以px为单位设置的页眉/页脚高度即可。
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
padding: 0;
margin: 0;
}
.site-content {
flex: 1;
}
header, footer {
height: 10vh;
background-color: orange;
color: white;
}<body class="site">
<header>Navigation</header>
<main class="site-content">content goes here</main>
<footer>Footer stuff</footer>
</body>