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

我有一个Web应用的CSS网格布局，有一个固定大小的页眉和页脚（用

rem

单位定义），以及一个可扩展的中心行（定义为

1fr

），其中包含两个侧栏和一个中心内容区。外部网格容器定义了一个宽度和高度来填充视口（

100vw/vh

）。我希望中间一行占据页眉和页脚之间的所有空间，并允许任何溢出进行滚动，而不是扩展页面的高度

我尝试了各种可能的解决方案，包括使用

overflow-y:scroll

，但似乎没有任何效果。额外的内容使页面更长，而不是使区域可滚动

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

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

---

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

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

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

---

欢迎来到堆栈溢出！寻求代码帮助的问题必须包含在问题中复制代码所需的最短代码，最好是在a中。这就是您要寻找的吗？这似乎是一个好的开始！它似乎不适合我，可能是因为嵌套的网格，但我会继续尝试使用

calc

和

max height

，我会让你知道这是否解决了问题。谢谢这对我有用！（可能是因为我的粘性页眉不是同一个网格元素的一部分，只有主体和页脚是。）谢谢。