我有以下网格，我想将其精确地跨越屏幕的高度 - 不能少，不能多。在网格中，我有一个固定页眉(一个)、一个固定页脚(三个)和一个可滚动内容(两个)
.grid-container {
display: grid;
grid-template-areas:
"one"
"two"
"three"
;
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
发生的情况是，如果 two 内的内容变得太大，整个网格的高度现在会大于视口(viewport)。结果，我的页脚被推下，而我想滚动内容并将页脚保持在原来的位置。
我知道我可以通过 position:fixed 实现我想要的效果，但这是一个更复杂网格的精简示例。感谢任何帮助，如果可能的话，我更喜欢保留网格方法。为了您的方便，我整理了一个 fiddle 。谢谢!
https://jsfiddle.net/x6stfc01/1/
HTML 为了您的方便
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<div style="height: 5000px"></div>
End of Content
</div>
<div class="three"></div>
</div>
最佳答案
您可以将 overflow-y:scroll 添加到 two 项或 overflow-y: auto (更好)
body {
margin: 0;
}
.grid-container {
display: grid;
grid-template-areas: "one" "two" "three";
grid-template-rows: 33px 1fr 34px;
height: 100vh;
}
.one {
grid-area: one;
background-color: blue;
}
.two {
grid-area: two;
background-color: yellow;
overflow-y: scroll;
}
.three {
grid-area: three;
background-color: red;
}<html>
<head>
</head>
<body>
<div class="grid-container">
<div class="one"></div>
<div class="two">
Start of Content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> End of Content
</div>
<div class="three"></div>
</div>
</body>
</html>关于html - 1fr 网格单元扩展超过 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55245916/