有没有一种方法可以强制网格容器扩展到屏幕的末端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 / vh设置的页眉/页脚高度即可。
无需使用calc函数，这可能也是创建动态网格的最佳方法。
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
padding: 0;
margin: 0;
}
.site-content {
flex: 1;
}
header, footer {
height: 20vh;
background-color: orange;
color: white;
}<body class="site">
<header>Navigation</header>
<main class="site-content">content goes here</main>
<footer>Footer stuff</footer>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句