纯CSS实现可折叠文本高度：百分比高度动画失效的解决方法

问题根源 #

你碰到的这个问题核心在于CSS过渡需要明确的数值区间。当你给#expand设置百分比高度时，它的父元素没有定义固定高度，浏览器没法计算出具体的像素值，自然没法触发平滑过渡。而宽度百分比能正常生效，是因为块级元素默认以父容器宽度为基准，浏览器能直接算出具体宽度值。

纯CSS解决方案：用max-height替代height #

既然没法预先知道文本高度，我们可以换个思路——利用max-height来实现过渡。把初始max-height设为0，展开时设一个远大于内容可能高度的数值（比如1000px），这样浏览器能识别明确的数值范围，过渡动画就能正常工作了。

修改后的完整代码如下：

/* 核心样式修改 */
.expand { 
  max-height: 0; 
  width: 0; 
  overflow: hidden; 
  transition: max-height 0.5s, width 0.5s ease-in-out; 
  background: #000000; 
  color: #FFF; 
}
input { display: none; visibility: hidden; }
input:checked+label+.expand { 
  max-height: 1000px; /* 设一个足够覆盖内容的最大值 */
  width: 100%; /* 百分比宽度正常生效 */
}

/* 原样式保留，修复了ID重复问题 */
#toggle:checked~label::before { content: "-"; }
#toggle1:checked~label::before { content: "-"; }
main { background: #EEE; width: 600px; margin: 20px auto; padding: 10px 0; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); }
section { padding: 0 20px; }
label { display: block; padding: 0.5em; text-align: center; border-bottom: 1px solid #CCC; color: #666; }
label:hover { color: #000; }
label::before { font-family: Consolas, monaco, monospace; font-weight: bold; font-size: 15px; content: "+"; vertical-align: text-top; display: inline-block; width: 20px; height: 20px; margin-right: 3px; background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); }

<main>
 <input id="toggle" type="checkbox" />
 <label for="toggle">Hidden Kitten</label>
 <div class="expand">
 <section>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </section>
 </div>
 <input id="toggle1" type="checkbox" />
 <label for="toggle1">Hidden Kitten</label>
 <div class="expand">
 <section>
 <p>mew</p>
 </section>
 </div>
</main>

额外优化提示 #

1. 我帮你把重复的#expandID改成了类名.expand——HTML里不能有重复ID，这是规范问题，改成类名后多个折叠面板可以复用同一段样式。
2. 如果担心max-height设得太大导致短内容的过渡显得拖沓，可以根据内容预估一个合理的最大值，或者微调过渡的时间曲线（比如用ease-out让收尾更快）。

内容的提问来源于stack exchange，提问作者Zee