局部滚动区域高度必须显式设定，因浏览器仅在容器有确定高度且内容超出时才触发overflow-y滚动；推荐用calc()、flex:1或JS动态设置，并注意iOS兼容性及absolute定位影响。
局部滚动区域高度必须显式设定，不能依赖内容撑开，否则 overflow-y: scroll 不会生效。
为什么 height 必须写死或用 calc() 计算
浏览器对 overflow 的触发逻辑是：只有当容器有**确定高度**且内容超出时，才显示滚动条。如果父容器是 height: auto 或未设高度，子元素即使写了 overflow-y: scroll 也只会把内容全展开，不滚动。
-
height: 100%失效常见于父级没设高度（比如body缺少height: 100vh） - 推荐用
height: calc(100vh - 100px)扣除 header/footer 固定高度，比百分比更可靠 - Flex 布局中可用
flex: 1替代 height，但前提是父容器设了display: flex; flex-direction: column
常见布局组合与高度写法
典型场景是「固定头尾 + 中间滚动」，关键在三者高度之和等于视口，且中间区域独立约束：
- Header：
.header { height: 60px; } - Footer：
.footer { height: 44px; } - 滚动区：
.content { height: calc(100vh - 104px); overflow-y: auto; } - 别漏掉：
html, body { height: 100%; margin: 0; }，否则100vh在部分 iOS Safari 下计算异常
移动端 iOS 的特殊处理
iOS Safari 对 calc() 和视口单位支持不稳定，尤其在地址栏收起/展开时 100vh 会跳变。实际项目中建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 动态设置高度：
document.querySelector('.content').style.height = window.innerHeight - 104 + 'px'; - 监听
resize事件，但注意防抖，避免频繁重设 - 或者改用
min-height+max-height组合兜底，例如：max-height: 70vh; overflow-y: auto;
Flex 布局下更简洁的写法
如果整个页面走 Flex，不用 calc() 也能干净实现：
html, body {
height: 100%;
margin: 0;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
}
.header { height: 60px; }
.content {
flex: 1;
overflow-y: auto;
}
.footer { height: 44px; }
这种写法兼容性好，iOS 也不易出错，但要注意 .content 内部若用 height: 100% 仍会失效——它只认 flex 分配后的实际尺寸，不是百分比。
最容易被忽略的是：滚动区域内部如果有 position: absolute 元素，它们会脱离文档流，导致父容器高度计算错误，进而让滚动失效。遇到滚动突然消失，先检查是否混用了绝对定位和高度约束。
