本文详解如何通过 css 变量与 javascript 动态计算内容高度，使红色悬停区域在展开时精准适配内部全部文本内容，避免截断或留白，实现平滑、响应式的垂直过渡效果。
本文详解如何通过 css 变量与 javascript 动态计算内容高度，使红色悬停区域在展开时精准适配内部全部文本内容，避免截断或留白，实现平滑、响应式的垂直过渡效果。
在您提供的代码中，.key 元素悬停时仅将 height 固定设为 500px，但实际文本高度可能远小于此值（造成大量空白），也可能超出此值（导致文字被裁剪）。真正的解决方案是让容器高度自动匹配其子内容的真实高度——这需要结合 CSS 的动态变量机制与 JavaScript 的运行时测量。
✅ 正确实现思路
核心在于：不硬编码展开高度，而是让 .key:hover 的高度等于 <h1 id="super"></h1> 的完整内容高度。由于 clientHeight 能准确获取渲染后元素的实际像素高度（含内边距、行高、换行等），我们可将其作为 CSS 自定义属性注入，再在 CSS 中引用。
? 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应悬停展开容器</title>
<style>
.box {
transform: translateY(-20px);
background: #9b59b6;
height: 200px;
width: 500px;
line-height: 1.6;
text-align: center;
color: white;
font-size: 20px;
overflow: hidden; /* 关键：隐藏溢出，确保初始状态只显示部分内容 */
transition: height 0.4s ease-in-out; /* 推荐使用更自然的缓动 */
}
.key {
height: 50px;
width: 600px;
background: red;
/* 移除冗余的 width 过渡，因宽度未变化 */
transition: height 0.4s ease-in-out;
}
.key:hover {
height: var(--superHeight, 50px); /* fallback 高度，防 JS 失败 */
}
#super {
margin: 0;
padding: 20px;
/* 确保文本可自然换行 */
word-break: break-word;
white-space: normal;
}
</style>
</head>
<body>
<div class="box key">
<h1 id="super">Trying to put it here
This is additional content that appears on hover.
It wraps naturally across multiple lines.
More lines here — demonstrating true adaptive behavior.
Even with varying font sizes or padding, the height adjusts correctly.
</h1>
</div>
<script>
// 等待 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
const titleEl = document.getElementById('super');
if (titleEl) {
// 获取渲染后的实际高度（包含 padding 和行高）
const fullHeight = titleEl.scrollHeight; // 更推荐 scrollHeight：包含所有内容，即使溢出
document.documentElement.style.setProperty('--superHeight', `${fullHeight}px`);
}
});
</script>
</body>
</html>? 关键要点说明
scrollHeightvsclientHeight：scrollHeight返回元素内容的总高度（含不可见部分），而clientHeight仅返回可视区域高度。对于完全展开场景，scrollHeight更可靠，尤其当内容存在padding或line-height导致视觉高度大于clientHeight时。overflow: hidden不可省略：
初始状态下必须隐藏溢出内容，否则长文本会直接撑开容器，失去“悬停展开”的视觉意义。CSS 过渡优化：
使用ease-in-out替代线性过渡（linear），使动画更符合人眼感知；时间建议控制在0.3–0.5s，过长显迟滞，过短难察觉。健壮性增强：
var(--superHeight, 50px)提供默认回退值，确保即使 JavaScript 执行失败，悬停仍能以基础高度展开，不影响基本功能。
? 进阶提示（可选）
若需支持响应式（如窗口缩放后内容高度变化），可监听 resize 事件并重新计算：
const updateHeight = () => {
const el = document.getElementById('super');
if (el) {
document.documentElement.style.setProperty('--superHeight', `${el.scrollHeight}px`);
}
};
window.addEventListener('resize', updateHeight);
updateHeight(); // 初始化调用至此，您的红色容器即可真正“包裹”全部文本，并在悬停时平滑、精准地展开至所需高度——不再是猜测的 500px，而是由内容自身决定的智能高度。
