CSS无法直接获取动态内容高度，因其声明式特性不支持运行时读取渲染尺寸；须用JS调用getBoundingClientRect().height测量后注入CSS变量，再用于min-height、伪元素等场景。
动态内容高度无法被CSS直接获取的原因
CSS本身是声明式的，不支持运行时读取元素实际渲染尺寸。像 height: fit-content 或 min-height: max-content 只能影响布局行为，无法把真实像素值“吐出来”供其他样式或逻辑使用。想让CSS“知道”某个 div 渲染后高 247px，必须靠JS测量，再把结果注入CSS变量。
用 getBoundingClientRect().height 获取真实高度
这是最可靠的方式——它返回包含边框、内边距、滚动条（如果可见）在内的视觉高度，不受 box-sizing 影响，也避开 offsetHeight 在隐藏元素上返回 0 的坑。
实操建议：
- 确保元素已渲染且未被
display: none或visibility: hidden遮蔽（opacity: 0可以） - 若内容由异步加载（如
fetch后插入），需在Promise.then或MutationObserver回调中调用 - 避免在
resize事件里高频重复调用，加防抖（如setTimeout延迟 50ms）
示例：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.dynamic-content');
const height = el.getBoundingClientRect().height;
document.documentElement.style.setProperty('--content-height', `${height}px`);
--content-height 变量在CSS中的典型用法
注入的变量不能直接用于 height 属性做等高（会触发循环布局），但适合控制相关容器、伪元素或过渡动画。
常见场景：
- 让父容器最小高度匹配子内容：
min-height: var(--content-height) - 驱动
::before或::after的尺寸（如遮罩层、渐变底边） - 配合
transition: height 0.3s实现平滑展开/收起（前提是JS同步更新变量并触发布局） - 与
@media组合做响应式判断（如height > 300px时显示“收起”按钮）——但注意：CSS无法做数值比较，需JS判断后切换类名
容易被忽略的边界情况
动态内容高度计算不是“测一次就完事”。以下情况必须重新测量：
- 字体加载完成（
font-display: swap导致重排） - 图片加载完成（尤其是未设宽高的
<img>） - 行内换行变化（如窗口缩放导致文本折行数改变）
- 使用了
line-clamp且内容溢出状态切换
最稳妥的做法是监听 ResizeObserver，但它只响应尺寸变化，不感知内容变化。对强动态场景（如富文本编辑器），仍需结合 MutationObserver + 节流。
