标签页切换时容器高度无法自适应，本质是内容区域未触发重排或高度未被正确计算；应避免display:none/visibility:hidden，改用max-height+overflow+transition动态设置，并确保元素可测量且无布局干扰。
标签页切换时容器高度无法自适应，本质是内容区域没有触发重排或高度未被正确计算，不是靠display: none切来切去就能解决的。
为什么 display 切换后高度不收缩/不展开
常见错误是给每个 tab-pane 设 display: none 或 visibility: hidden，再用 JS 切换。但 display: none 的元素不参与文档流，其 scrollHeight 读不到真实高度；而 visibility: hidden 虽保留占位，却仍会撑开父容器——两种方式都绕不开高度“失联”问题。
- 用
display: none→offsetHeight和scrollHeight都返回0，JS 拿不到目标高度 - 用
visibility: hidden→ 容器始终按所有 tab 内容最大高度撑开，白占空间 - 直接写死
height: 300px→ 内容变多就溢出，变少就留白，破坏响应性
用 overflow + max-height + transition 实现平滑高度过渡
核心是避免 display，改用 overflow: hidden 配合 max-height 控制可见性，并用 JS 动态设目标值。CSS 过渡只对数值型属性生效，max-height 是唯一能替代 height: auto 的可动画属性。
- 初始状态：tab-pane 设
max-height: 0、overflow: hidden、transition: max-height 0.3s ease-in-out - 激活时：JS 计算当前 pane 的
scrollHeight，并设为max-height值（如el.style.maxHeight = el.scrollHeight + 'px'） - 关闭时：先设
max-height为当前值（强制触发重排），再设回0，动画才能反向执行 - 注意：不要用
height，它和auto组合无法过渡；也不要设过大的max-height（如1000px），否则动画会“冲过头”
Tab 切换时如何准确获取内容高度
必须确保目标 pane 在计算前已渲染且无 display: none。最稳妥做法是：先将 pane 设为 position: absolute; visibility: hidden; opacity: 0（不占流、不可见、但可测量），再读 scrollHeight，最后恢复定位和可见性。
- 错误写法：
el.style.display = 'block'; height = el.scrollHeight→ 触发同步重排，但若父级有overflow: hidden，可能截断测量 - 推荐写法：临时加类
.measuring，CSS 中定义.measuring { position: absolute; visibility: hidden; width: 100%; }，再取scrollHeight - iOS Safari 下，若 pane 含
video或iframe，需等load或canplay事件后再测高，否则返回0
多个 tab 共享同一个容器时的布局陷阱
如果所有 tab-pane 都塞进一个固定高度的 wrapper，即使单个 pane 高度正确，wrapper 自身仍可能因 flex/grid 等布局行为锁死高度，导致内容被裁切或滚动失效。
- 别给 wrapper 设
height或max-height，除非你明确要限制整体可视区域 - 若 wrapper 是 flex 子项，确保父容器设了
flex-direction: column且自身有flex: 1，否则height: 100%无效 - 滚动必须作用在 pane 内部（如
.tab-pane .content { max-height: 400px; overflow-y: auto; }），而不是 wrapper 上 - 慎用
transform: scaleY(0)做隐藏——它不影响文档流，但scrollHeight仍可读，不过动画质感不如max-height自然
真正麻烦的从来不是“怎么动起来”，而是“动完之后那个高度值有没有被浏览器真实承认”。每次切换前，务必确认目标元素已挂载、无 display 锁定、无父级 overflow 截断——否则 JS 读出来的永远是 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
