如何让DIV高度自适应内容且hover时保留过渡动画效果

问题根源 #

CSS过渡动画无法在height: fit-content（动态计算值）和固定高度值之间生效，因为过渡仅支持可计算的数值类型属性变化。直接用固定高度又会丢失内容自适应的能力，所以需要换一种思路。

可行方案：利用max-height实现过渡 #

通过以下步骤实现需求：

• 用height: auto让DIV高度自适应内部文本
• 保留min-height确保最小高度
• 给max-height设置一个足够覆盖所有内容的初始值，过渡动画作用于max-height而非height
• hover时修改max-height到目标值，实现平滑的高度变化

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 1px solid;
  width: 200px;
  min-height: 50px;
  max-height: 200px; /* 需大于最长内容的高度，根据实际情况调整 */
  height: auto;
  background-color: #0000ff;
  transition: max-height 0.5s ease;
  overflow: hidden; /* 防止内容溢出（若max-height设置不足时） */
}

div:hover {
  background-color: #ffcccc;
  max-height: 300px; /* hover时的目标高度 */
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis</div>

</body>
</html>

注意事项 #

• 初始max-height的数值要足够大，确保能容纳所有可能的文本内容，避免正常状态下内容被截断
• 如果无法预估内容最大高度，可以设置一个较大的保守值（比如1000px），过渡时长可根据需求调整
• overflow: hidden是可选但推荐的设置，确保在极端情况下布局不会混乱

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