在网页交互里，经常需要把一长段数据先收起来，用户点一下再平滑展开。很多人第一反应是给外层容器写height从0到auto的过渡，但这样在浏览器里根本不会动。原因在于CSS过渡需要起止状态都有具体数值，而auto是关键字，引擎算不出中间帧。此时用max-height来顶替height做动画，就成了纯CSS方案里最实用的折中办法。
一、max-height过渡的基本原理
max-height本身是一个上限约束。当元素内容高度低于max-height时，它表现得像没限制；一旦超过，就会被裁切到该值。我们利用这一点：收起状态设max-height为0（或很小的值），展开状态设为一个肯定比内容高的数值，再对max-height加transition，浏览器就能在这两个具体数值间补间，视觉上形成拉开的动画。
需要注意的是，max-height并不是真实高度。动画时长是基于你填写的max-height差值计算的，而不是内容实际高度。如果写max-height:2000px，但内容只有200px，那么前90%的动画时间元素其实已经全显示了，只是数值还在往上走，用户会感觉停顿一下才结束。因此选值要尽量贴近真实内容高度。
1.1 最小可用结构
下面是一段可直接运行的HTML与CSS，演示按钮控制一个数据块的折叠。我们用checkbox的:checked状态来切换max-height，不需要任何JS。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.wrap { max-width: 400px; }
.toggle { display: none; }
.btn { padding: 8px 12px; background: #3b82f6; color: #fff; cursor: pointer; }
.box {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: #f1f5f9;
}
.toggle:checked + .box {
max-height: 600px;
}
</style>
</head>
<body>
<div class="wrap">
<label class="btn" for="tg">切换数据</label>
<input class="toggle" type="checkbox" id="tg">
<div class="box">
<p>这里是被折叠的数据内容，可以是日志、说明或表单。</p>
<p>再次点击上面的按钮即可收起本区域。</p>
</div>
</div>
</body>
</html>
上面代码中，.box默认max-height为0且overflow:hidden，所以完全看不见。当checkbox被选中，相邻兄弟选择器让max-height变成600px，过渡生效。如果实际内容少于600px，动画会在内容展完后继续“空走”一小段，这是max-height方案的固有特征。
二、动态内容下的取值策略
当折叠区里是接口返回的不定长数据，写死max-height很容易出问题：太小则展开不全，太大则动画拖沓。一种纯CSS思路是给max-height设一个业务上不可能超过的值，比如1200px，并相应把transition时间缩短到0.25s，让空走感减弱。但这只是妥协。
更稳妥的做法是用少量JS在展开前读取scrollHeight，把真实高度赋给max-height，展开后若需自适应再改回none。这样既保留CSS过渡的流畅，又避开数值失真。下面示例展示这种混合方案。
2.1 JS辅助精准高度
以下脚本在点击时先计算内容高度，再切换类触发过渡，过渡结束把max-height置为none以防窗口缩放时截断。
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
var open = false;
btn.addEventListener('click', function () {
if (!open) {
box.style.maxHeight = box.scrollHeight + 'px';
open = true;
} else {
box.style.maxHeight = '0px';
open = false;
}
});
box.addEventListener('transitionend', function () {
if (open) {
box.style.maxHeight = 'none';
}
});
这段代码里scrollHeight是元素内容总高，包括被overflow藏住的部分。赋给max-height后浏览器从0过渡到该值，时间完全匹配内容，不会有空走。transitionend事件中把值设none，是为了让用户后续改变窗口宽度时内容能自然撑开，不被固定高度限制。
三、缓动与体验细节
transition里的timing-function建议用ease-out而非linear。因为展开初期用户最关注内容露出的速度，ease-out开头快结尾慢，符合感知；收起时则可单独写transition属性覆盖为ease-in，让收起显得利落。另外记得始终保留overflow:hidden，否则max-height变小也不会裁切内容，动画就失效了。
如果折叠块内有图片或表格，它们加载可能晚于脚本测算，导致高度算错。此时可在资源onload后重新测算，或给容器设min-height过渡备用。总之max-height过渡是一项用“近似”换“纯CSS简洁”的技术，理解其数值本质才能不踩坑。
3.1 常用参数对照
下表列出不同max-height设定对动画观感的影响，方便按场景取舍。
| max-height值 | 内容实际高 | 观感问题 |
|---|---|---|
| 200px | 180px | 正常，略有余量 |
| 2000px | 180px | 明显停顿，末尾突兀 |
| 0 | 任意 | 完全收起，无显示 |
通过对照可以看出，max-height只是“天花板”，不是“墙高”。写代码时心里要有一把尺：它越接近真相，动画越漂亮。
CSSmax-height折叠动画修改时间：2026-08-06 04:27:32