如何实现JavaScript动态调整div高度与页内锚点跳转功能兼容

问题根因 #

你当前的高度调整逻辑仅在页面首次加载时执行一次，存在两处关键问题：

• JS执行时机过早，DOM资源未完全渲染就计算container高度时，拿到的高度值比实际渲染后的高度偏小，将base高度设置为该偏小值后，外层容器高度被压缩，页面整体可滚动高度不足，锚点跳转后就会出现无法上滑到页面顶部的问题。
• 未监听页面内容、窗口尺寸变化事件，页面高度变化后base高度没有同步更新，也会触发高度不匹配问题。

修复方案 #

方案一：优化JS逻辑（快速修复） #

替换原有JS代码为以下内容，调整执行时机并增加动态监听：

// 封装高度调整函数
function adjustBaseHeight() {
  const container = document.getElementById("container");
  const base = document.getElementById("base");
  if (!container || !base) return;
  // 先重置base高度重新计算
  base.style.height = 'auto';
  const containerHeight = container.offsetHeight;
  const baseHeight = base.offsetHeight;
  if (baseHeight > containerHeight) {
    base.style.height = containerHeight + "px";
  }
}

// 页面所有资源加载完成后执行
window.addEventListener('load', adjustBaseHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustBaseHeight);

如果页面后续有异步加载内容的场景，内容加载完成后手动调用adjustBaseHeight()即可。

方案二：纯CSS实现（彻底避免JS高度问题） #

你用的Grid布局本身就可以实现你要的效果，完全不需要JS干预，修改.base的CSS配置即可：

.base {
  /* 保留原有所有属性，新增以下配置 */
  height: 0;
  min-height: 100%;
  pointer-events: none;
}

修改后base的高度会自动跟随外层容器高度，而外层容器高度完全由前景container的内容撑开，高度溢出的部分会自动被截断，完全满足你隐藏多余圆周率数字的需求，也不会再出现锚点跳转相关的滚动问题。

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