如何为CSS Grid设置自适应max-height 实现整页100vh分区独立滚动

问题场景梳理 #

你之前一直靠极简的一行式布局方案做基础页面搭建，非常认可这种只用少量CSS就能实现内容、视口强自适应的效果，直到碰到需要给大内容量区块加独立滚动的场景就卡住了：

• 你想要实现的最终效果：整个页面始终严格占满100vh视口高度，内容超出单个区块显示范围时，仅该区块内部滚动，页面本身不产生整体滚动，footer始终固定在视口底部。
• 你之前尝试过的方案：给body和#Body容器设置隐式高度，给各级父容器调整不同数值的max-height，但最终效果还是会让整个页面超出视口高度，把footer挤到可视区域外。目前唯一能稳定限制高度的方法是给滚动区块写死固定vh值（比如85vh），但只要header或footer的内容高度变化，这个固定值就需要同步修改，灵活性非常差。

你当前的核心疑问：
为什么设置max-height: 100%完全达不到预期效果？有没有不需要写死固定高度、全链路自适应的解决方案？

你目前使用的参考CSS代码如下：

body,html{height:100vh;width:100%;margin:0;padding:0;}
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
#Body {
    height: 100%; /* 此处曾尝试替换为80-95vh的固定值 */
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px;
}
.section {
    max-height: 100%;
    overflow: scroll;
    border: 1.5px solid;
    border-radius: 10px;
    padding: 5px;
}

问题核心原因 #

max-height: 100%失效本质是受CSS百分比高度的继承规则约束：当父容器没有设置明确的、非auto的固定高度值时，子元素的百分比高度计算会直接失效，自动退回为内容撑开的auto高度。

你的代码中，#Body是网格布局里grid-template-rows: auto 1fr auto规则分配的中间行，虽然网格系统实际会给它分配header、footer之外的全部剩余空间，但这个高度是布局引擎动态计算的结果，并不是通过显式height属性定义的固定基准值。这种情况下，#Body内部的.section子元素使用max-height: 100%时，浏览器找不到可用于计算百分比的有效基准，自然不会按照预期限制高度——.section会按照自身内容的总高度被撑开，最终把整个页面顶出视口范围，把footer挤到屏幕外。

可落地的自适应解决方案 #

全程不需要给任何元素写死固定vh值，只需要调整三处小的设置，就能实现全场景自适应的滚动布局：

1. 给作为网格容器的body补充overflow: hidden，从根节点层面阻止内容超出时把整个页面撑高，把页面的可视边界牢牢锁在100vh视口范围内。
2. 删除#Body和.section上原来写的height: 100%、max-height: 100%，给#Body补上min-height: 0。因为网格布局的默认单元大小是auto，也就是会被内部内容强制撑到最大尺寸，补上这个属性后，网格子元素就不会被自身内容强制撑破父容器分配的空间边界。
3. 给.section区块也补上min-height: 0，让区块可以被限制在分配到的网格单元高度内，内容超出时触发自身的独立滚动，不会反过来撑高整个#Body容器。

调整后的核心CSS代码：

body,html{height:100vh;width:100%;margin:0;padding:0;}
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden; /* 新增：锁死页面整体高度，避免被内容撑出视口 */
}
#Body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px;
    min-height: 0; /* 新增：允许网格单元被内容溢出 */
}
.section {
    overflow: scroll;
    min-height: 0; /* 新增：让区块在分配的空间内独立滚动 */
    border: 1.5px solid;
    border-radius: 10px;
    padding: 5px;
}

实际效果 #

调整完成后，不管header、footer的内容高度怎么动态变化，网格系统都会自动把剩余的视口空间分配给#Body容器，内部的每个滚动区块都会被严格限制在分配到的空间边界内，内容超出时仅触发区块自身的滚动，footer始终保持在视口底部，完全不需要手动调整任何固定高度参数。

内容的提问来源于stack exchange，提问作者David Williams IV