如下图，要实现一个超出一定高度默认折叠的div层，下边带有展开/折叠按钮，点击按钮实现展开/折叠。
原来的代码：
.attrTable { border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; height: auto; transition: height 1s ease; &.collapse { height: 400px; overflow: hidden; } }
这种写法是不会生效的，由于div层的高度是auto，折叠后的高度是400px，浏览器无法计算从auto到400px的过渡处理。当然也可以在获取数据并渲染之后实时计算具体高度，但这个就太复杂了。
有效的解决方案就是使用max-height代替height，代码如下：
.attrTable { border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; height: auto; /* 保持动态高度 */ max-height: 5000px; /* 展开时上限（远大于实际动态高度） */ overflow: visible; /* 展开时显示全部内容 */ transition: max-height 1s ease; /* 过渡目标改为 max-height */ &.collapse { max-height: 400px; /* 折叠时固定上限 */ overflow: hidden; /* 隐藏超出部分 */ } }
如上，给div层设置一个很大的max-height，使用max-height来作为动态效果触发的样式，就能实现展开/折叠的过渡效果了。
关键说明：
1. max-height 取值技巧：
展开状态的 max-height 要设为 “肯定大于动态高度” 的数值（如 5000px，根据你的实际场景调整，只要不小于最大可能高度即可）。
折叠状态的 max-height 保持你要的 400px，实现 “固定高度折叠”。
2. 为什么生效：
展开时：max-height: 5000px（实际高度由内容决定，动态自适应），overflow: visible 显示全部内容。
折叠时：max-height: 400px，超出部分被 overflow: hidden 隐藏，且 max-height 从 5000px → 400px 是 “数值→数值” 的过渡，浏览器能正常计算动画。
3. 优化体验（可选）：
如果动态高度很小（比如不到 400px），折叠时可能看不到过渡效果，可给展开状态加最小高度兜底：
.attrTable { /* 其他样式不变 */ min-height: 100px; /* 确保展开时至少有一定高度，过渡更明显 */ }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。