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

Question

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

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

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

这是我的布局的一个相当小的例子:

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

(请注意，HTML 和 CSS 中的嵌套区域是有意设计的，因此任何解决方案都应仅使用 CSS，不应更改 HTML 标记。)

Answer 1

假设header和footer的固定高度为100px，那么给content area赋予样式:

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