纯 css 实现移动端折叠面板高度自适应需用 max-height + overflow-hidden + transition-all 组合，因 height: auto 不支持过渡动画；必须设固定 max-height（如 60vh 或 800px）代替 auto，配合 max-h-0、overflow-hidden、transition-all 三类缺一不可；还需处理键盘遮挡（用 100dvh）、嵌套子菜单高度自适应（禁用固定 height、避免 absolute）及 js 切换时禁用 display 控制。
纯 CSS 实现移动端折叠面板高度自适应，关键不是靠 height: auto 直接生效，而是用 max-height + overflow-hidden + transition-all 组合兜住动态内容变化。
为什么不能直接用 height: auto 动画？
CSS 不允许对 height: auto 做过渡动画——浏览器无法计算“从 0 到 auto”的中间值，结果就是瞬间展开/收起，毫无动画可言。很多初学者卡在这一步，反复改 height 却发现 transition 没反应。
常见错误现象：max-height: 0 → max-height: auto 写在 transition 里，但 auto 在过渡中被当作 0 处理，动画失效；或者只写 transition-max-height，但 padding、opacity 等同时变化时出现抖动或截断。
- 必须用固定数值（如
max-height: 500px）代替auto，确保浏览器能插值计算 - 这个值要略大于面板可能的最大内容高度（比如最长 FAQ 文本+内边距），太小会裁剪，太大则收起时留白明显
- 实际项目中建议设为
max-height: 60vh或max-height: 800px，比硬写1000px更稳妥
三个必加的 Tailwind 类及其逻辑关系
Tailwind 用户最容易漏掉其中一两个，导致动画断裂或内容溢出。这三个类不是可选修饰，而是构成完整行为闭环的最小集合：
-
max-h-0：初始状态视觉归零（注意不是h-0，后者会破坏文档流高度计算） -
overflow-hidden：必须始终存在，不能只在折叠态加；否则动画中内容会撑开容器并溢出 -
transition-all duration-300 ease-in-out：比单写transition-max-height更可靠——因为展开时 padding、opacity、margin 都可能隐式变化，transition-all能一并捕获
顺序无关，但三者缺一不可。少一个，就可能出现：点击后闪一下再展开、收起时底部留白、动画中途突然跳变。
移动端需额外防键盘遮挡和视口压缩
在 iOS/Android 上，用户点击输入框触发软键盘后，vh 单位会失真，100vh 变成“当前可视区域高度”，导致折叠面板被顶出屏幕外。这不是 CSS 动画问题，而是布局基准塌陷。
解决要点：
- 给折叠面板的**直接父容器**设
min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），降级 fallback 用min-height: 100vh - 确保该父容器有
overflow-y: auto，否则scroll-margin-bottom不生效 - 在触发展开的按钮或面板头部加
scroll-margin-bottom: 2rem，让滚动定位时预留安全距离 - 避免把整个面板包在
position: fixed或transform容器里——这会切断与视口滚动链的关系
嵌套子菜单展开时父级高度不自适应？
当二级菜单（如 .sub-2）在折叠面板内展开，而父级 .sub-1 仍保持固定高度，就会重叠或错位。这不是动画问题，是布局计算错误。
根本原因：父级用了 height: 55px 这类固定值，而非依赖内容伸缩。
- 把父级的
height改为height: auto，同时保留其max-height过渡逻辑 - 确保子菜单没有
position: absolute脱离文档流——否则父级无法感知其高度 - 若用 JS 控制显隐，切勿用
display: none/block切换，它会中断 transition；应只切换含max-h-0的 class
真正难的不是写出动画，而是让所有嵌套层级都共享同一套高度计算逻辑，且不被键盘、横屏、DPR 等移动端特有因素干扰。多数线上 bug 都出在“以为 height: auto 就万事大吉”，却没意识到它和 transition、overflow、viewport 是强耦合的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
