<p>固定高度局部滚动失败主因是容器缺乏独立滚动上下文：父容器高度塌陷、position: fixed 干扰文档流，或 height 计算为0；须确保显式高度（如height: 400px或calc(100vh - 120px)）、用overflow: auto而非scroll，并避免fixed元素嵌套在滚动容器内。</p>
固定高度局部滚动不是加个 overflow: scroll 就完事——多数失败案例都卡在容器没形成独立滚动上下文，或者父元素高度塌陷、position: fixed 意外干扰了文档流。
为什么设置了 height 和 overflow 还不滚动？
常见现象是：滚动条出现但拖不动、内容被裁切、整个页面跟着动、或根本没滚动条。核心原因有三个：
-
height值被父容器忽略（比如父元素没设height或display: flex，导致子元素calc(100vh - 60px)计算结果为0px） - 用了
position: fixed或absolute的子元素，让容器无法感知内容高度，overflow失效 - 误用
overflow: scroll而非overflow: auto，导致空容器也强显滚动条，干扰调试
必须确保容器有明确的高度上下文
局部滚动区域要“知道自己多高”，不能依赖内容撑开。推荐以下任一方式建立可靠高度：
- 直接写死像素值：
height: 400px（适合高度确定的仪表盘卡片） - 用视口单位计算：
height: calc(100vh - 120px)，但前提是html和body已设height: 100vh; margin: 0 - 用 Flex 布局继承父高：
display: flex; flex-direction: column的父容器中，子项设flex: 1+overflow: auto
别信“只要写了 height 就一定生效”——检查 computed style 中该元素的 height 是否真为预期值，不是 auto。
立即学习“前端免费学习笔记（深入）”；
overflow: auto 与 overflow-y: scroll 的关键区别
overflow: scroll 强制显示滚动条，哪怕内容根本没溢出；overflow: auto 只在必要时才显示，更符合直觉。但注意：
- 某些旧版 Safari 对
auto渲染不稳定，可降级为overflow-y: auto - 若容器内含
position: absolute元素，它们不参与高度计算，可能导致滚动区域漏掉底部内容 - 移动端 WebKit 默认隐藏滚动条，需加
::-webkit-scrollbar { width: 6px; }才可见（仅调试用）
避免 fixed 定位污染滚动上下文
这是最隐蔽的坑：一旦局部滚动容器内部或其任意祖先用了 position: fixed，该容器就大概率失去滚动能力。因为 fixed 元素脱离文档流，父容器高度计算失效，overflow 无作用对象。
- 检查滚动区域所有祖先元素的
position值，尤其导航栏、弹窗遮罩层 - 如需固定头部，用
position: sticky替代fixed，它仍保留在文档流中 - 实在要用
fixed，把它移出滚动容器 DOM 树，用绝对定位 +z-index叠在上方，而非嵌套在内部
滚动是否生效，最终看的是「容器内容高度 > 容器自身高度」且「容器处于标准文档流中」——其余都是表象。
