<p>滑动区域高度计算不准应优先用 calc(100vh - 头高 - 底高) 或 flex 布局：前者需确保单位统一、父容器可渲染高度，后者更健壮且兼容性好。</p>
滑动区域高度计算不准，通常是因为父容器高度没设好，或子元素用了 height: 100% 却没追溯到有明确高度的祖先。用 calc() 配合 vh 是最直接、可靠的解法——它绕过继承链依赖，直接基于视口算出可用高度。
明确需要“撑满剩余空间”的区域
比如一个固定头部 + 可滚动内容区 + 固定底部的布局，中间内容区要填满剩余高度。不能只写 height: 100%，而应算出：视口高减去头高和底高。
- 假设头部高 60px，底部高 44px，则内容区高度 =
calc(100vh - 60px - 44px) - 记得给内容区加
overflow-y: auto，否则滚动不会触发 - 如果头部/底部用了
rem或em，calc()里也统一单位，避免混用导致计算失效
注意父容器的 display 和定位影响
calc(100vh - ...) 生效的前提是元素能正常渲染高度。常见踩坑点：
- 父容器是
display: flex且没设flex-direction: column，子项可能不按预期占满 - 父容器用了
position: absolute但没设top/bottom，会导致100vh失效或溢出 - 移动端 Safari 对
vh有兼容问题（地址栏缩放时值会变），可改用dvh（dynamic viewport height）替代，如calc(100dvh - 60px)
配合 flex 布局更稳妥（推荐组合用法）
单靠 calc 能解决问题，但结合 flex 可提升健壮性，尤其应对动态高度的头部/底部：
立即学习“前端免费学习笔记（深入）”；
- 给外层设
display: flex; flex-direction: column; height: 100vh - 头部、底部用固定
flex: 0 0 auto，内容区用flex: 1并加overflow-y: auto - 此时内容区无需写
calc，flex 自动分配剩余空间，且兼容性更好
基本上就这些。calc + vh 是快速见效的方案，但别忘了检查父级是否“断层”——只要有一层没高度，百分比就会失效；而 flex + 100vh 组合更省心，适合大多数现代项目。
