如何将获取的scrollHeight值设置为id为background的div的CSS高度

操作逻辑 #

• 去掉无效的DOM文本赋值代码，直接操作目标元素的行内样式
• 正确获取全页面内容的实际总高度，替代原来找不到.demo元素的无效取值
• 赋值样式时必须补充像素单位px

可直接复用的修正代码 #

.content {
  background: #eee;
  width: 100%;
  height: 2000px;
}

#background {
  width: 200px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}

<div id="background"></div>
<div class="content"></div>

// 跨浏览器计算整个文档的总内容高度
const fullContentHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.querySelector('.content').scrollHeight
);
// 将计算得到的高度赋值给目标元素
document.getElementById('background').style.height = `${fullContentHeight}px`;

注意要点 #

• 原CSS中给#background设置的height:100%可以直接移除：绝对定位元素的百分比高度是相对于最近的定位父级计算的，并非整个文档的总高度，用JS直接赋值像素值可控性更强
• 页面如果存在动态内容加载、窗口尺寸调整的场景，需要在对应时机（如异步内容渲染完成、窗口触发resize事件时）重新执行高度计算与赋值，否则会出现高度匹配失效的问题
• 原代码中document.getElementById("background").text = "xxx"是完全无效的写法，DOM元素没有可直接写入的text属性，如果需要在元素内展示文本，需要使用textContent或innerText属性

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