固定页眉和页脚，在 1fr CSS 网格区域内带有可滚动的侧边栏

Question

我有一个用于 web 应用程序的 CSS 网格布局，具有固定大小的页眉和页脚（使用 rem 单位定义）和一个可扩展的中心行（定义为 1fr），其中包含两个侧边栏和一个中心内容区域。外部网格容器定义了一个宽度和高度以填充视口 (100vw/vh)。我希望中心行占据页眉和页脚之间的所有空间，并且任何溢出都可以滚动，而不是扩大页面的高度。

我尝试了各种可能的解决方案，包括使用overflow-y:scroll，但似乎没有任何效果。额外的内容使页面更长，而不是使区域可滚动。

我不想为中心行使用固定大小，因为我希望它可以扩展以适应任意大的屏幕。

这是我的布局的一个相当简单的示例：

https://codepen.io/Shepazu/pen/EwePgB

（请注意，HTML 和 CSS 中的嵌套区域是有意的，因此任何解决方案都应该是仅 CSS，并且不应更改 HTML 标记。）

Answer 1

假设页眉和页脚的固定高度为100px，则将样式赋予内容区域：

.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}