如何使用JavaScript计算设置为100vh的可滚动HTML元素的实际总高度

元素被CSS设置为固定height:100vh+overflow:auto时，offsetHeight、getBoundingClientRect().height这类常规尺寸属性只会返回这个固定的视口高度，无法获取内容自然撑开的总高度。

方案1：优先使用原生scrollHeight属性（零改动） #

绝大多数场景下不需要修改任何现有样式，直接读取元素的scrollHeight属性即可拿到内容总高度：

• 该属性的设计逻辑就是返回元素全部内容的总高度，包含因overflow:auto被裁切、需要滚动才能查看的部分，计算结果与height:auto状态下的offsetHeight高度基本一致
• 口径适配说明：scrollHeight会计入元素的上下内边距（padding），但不会包含上下边框宽度，如果需要和offsetHeight的计算规则完全对齐，手动补全边框宽度即可：

const el = document.querySelector('.your-target-element');
const computedStyle = getComputedStyle(el);
const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
const totalRealHeight = el.scrollHeight + borderTop + borderBottom;

方案2：临时样式测量（兜底场景） #

如果遇到scrollHeight计算偏差的情况（比如内部有粘性定位元素、层叠布局的溢出内容识别异常），可以用无用户感知的临时样式法精准测量：

1. 保存元素当前的所有原始行内样式，便于测量完成后还原
2. 临时将元素的height设为auto、overflow设为visible，让内容自然撑开
3. 给元素添加脱离文档流、隐藏可见性的临时样式，避免测量过程中出现布局跳动、影响用户正常浏览
4. 读取此时的offsetHeight值，即为目标总高度
5. 立即将所有临时改动的样式还原
   参考实现代码：

const targetEl = document.querySelector('.your-target-element');
// 备份原始行内样式
const originStyle = {
  height: targetEl.style.height,
  overflow: targetEl.style.overflow,
  position: targetEl.style.position,
  visibility: targetEl.style.visibility
};
// 应用临时测量样式
targetEl.style.height = 'auto';
targetEl.style.overflow = 'visible';
targetEl.style.position = 'absolute';
targetEl.style.visibility = 'hidden';
// 读取目标高度
const realTotalHeight = targetEl.offsetHeight;
// 还原所有原始样式
Object.assign(targetEl.style, originStyle);

• 不要不做遮挡直接将元素高度修改为auto：这会瞬间把页面拉伸到内容全展开的状态，用户会看到明显的布局闪烁
• 如果元素内部存在未加载完成的图片、异步渲染的内容，需要等待资源加载、DOM更新完成后再执行测量，否则拿到的高度会存在偏差
• 不要使用getBoundingClientRect()获取总高度：该方法返回元素当前的视口渲染高度，会被固定的100vh锁死，无法识别溢出的内容

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