如何使用JavaScript动态设置一个div高度与另一个div相等

核心问题 #

当前硬编码宽高生效但无法自适应的根源有两点：

• 作为父容器的.main元素没有设置position: relative，绝对定位的.overlay无法以.main作为定位参照
• 写死的500px固定宽高无法匹配不同实例的动态尺寸

方案1：纯CSS实现（优先推荐，无JS依赖） #

不需要写任何JavaScript，通过CSS定位属性即可让遮罩自动撑满父容器，适配任意数量、任意高度的.main实例，哪怕内容动态变化也能自动适配。

直接替换原有CSS代码即可：

/* 给main容器添加相对定位，作为遮罩的定位基准 */
.main {
  position: relative;
}

.overlay {
  position: absolute;
  /* 四个偏移量设为0，自动撑满父容器的全部宽高，无需写死数值 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .22);
  /* 按需调整z-index，控制遮罩层级 */
  z-index: 10;
}

.maindiv {
  position: relative;
  /* 如果需要表格内容显示在遮罩上方，设置高于遮罩的z-index即可；如果需要遮罩拦截所有交互，可删除这行 */
  z-index: 20;
}

该方案性能最优，不会有JS计算的延迟问题，适配所有响应式、动态渲染场景。

方案2：JavaScript动态计算（特殊场景备选） #

如果业务有特殊限制无法使用纯CSS方案，可以通过JS批量同步尺寸，同时监听容器变化自动更新：

1. 先调整CSS，移除.overlay写死的宽高，给.main补相对定位：

.main {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .22);
  z-index: 10;
}
.maindiv {
  position: relative;
  z-index: 20;
}

2. 加入以下JS代码：

// 同步所有main容器对应overlay的尺寸
function updateAllOverlaySize() {
  document.querySelectorAll('.main').forEach(container => {
    const overlay = container.querySelector(':scope > .overlay');
    if (!overlay) return;
    const { width, height } = container.getBoundingClientRect();
    overlay.style.width = `${width}px`;
    overlay.style.height = `${height}px`;
  });
}

// 页面初始加载完成后执行一次
window.addEventListener('DOMContentLoaded', updateAllOverlaySize);
// 窗口尺寸变化时重新计算
window.addEventListener('resize', updateAllOverlaySize);

// 监听容器本身的尺寸变化（适配异步加载内容、动态增减内容的场景）
const observer = new ResizeObserver(updateAllOverlaySize);
document.querySelectorAll('.main').forEach(container => observer.observe(container));

// 如果你的main实例是动态追加到页面的，在追加完成后手动调用updateAllOverlaySize()，同时给新容器添加observer监听即可

内容的提问来源于stack exchange，提问作者Daniel V.