height: 100%在局部滚动中失效，根本原因是高度链中断——任一父级computed height为auto时，100%×0px=0px，即使加overflow-y: auto也无效；必须逐层检查html、body及所有中间父级的高度是否均为具体值。
局部滚动容器不自适应，根本不是“没写对 CSS”，而是高度链断在了某一级——height: 100% 在父级没高时等于 0px，再怎么加 overflow-y: auto 都白搭。
为什么 height: 100% 在局部滚动里基本没用
浏览器计算 height: 100% 时，会向上找第一个有明确高度的祖先。如果从目标容器一路查到 html，中间任何一级是 height: auto（默认值）或未设高，那它的 100% 就是 0。
-
body没设height: 100%→ 子级height: 100%失效 - Flex 容器没设
height或min-height→ 里面flex: 1的子项无法撑高 - 用了
position: absolute→ 子元素height: 100%不继承定位上下文，必须手动算
响应式高度的四种可靠写法（按场景选）
别碰 % 高度，除非你已确认整条高度链都可控。优先用这些：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
max-height: 80vh：适合内容长度浮动、但不想占满全屏的区域（如聊天记录区），vh在移动端需注意地址栏收起时的跳变，100dvh更稳 -
height: calc(100vh - 120px)：固定头尾布局下最常用，减去 header + footer 总高，注意单位必须一致（不能混用rem和px） -
flex: 1：父容器必须是display: flex; flex-direction: column，且自身不能设height，否则会覆盖 flex 分配逻辑 -
max-height: 500px：纯硬限高，适合卡片类组件，配合overflow-y: auto最不容易出错
移动端局部滚动必须加的两个东西
iOS 和 Android WebView 对局部滚动更敏感，漏掉任一都会导致“点得中、滑不动”或“卡顿无惯性”：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须完整存在，缺initial-scale=1.0就失效 -
-webkit-overflow-scrolling: touch必须加在滚动容器上，且该容器position不能是static（至少为relative） - 如果容器有
border-radius，还得额外加overflow: hidden，否则圆角内内容会溢出
Flex 布局里局部滚动突然塌陷？检查 flex-shrink
当局部滚动容器是 Flex 子项，内容一多它反而被压缩到看不见滚动条——大概率是 flex-shrink: 1（默认值）在作怪。
- 给滚动容器加
flex-shrink: 0，强制它不收缩 - 别依赖
flex: 1同时解决“填满高度”和“允许滚动”——flex: 1是分配剩余空间，不是设高；它仍需配合overflow-y: auto才能滚 - 如果父 Flex 容器设了
height: 0或min-height: 0，子项即使flex: 1也撑不开
真正难的不是写哪行代码，而是判断高度链断在哪一级。每次局部滚动失效，先用 DevTools 逐级检查 computed height，而不是反复调 overflow。多数时候，问题不在滚动容器本身，而在它头顶第三层那个忘了设高的 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
