如何设置含无高度绝对定位子div的容器div高度？

核心逻辑 #

绝对定位元素脱离文档流，父容器无法自动感知其高度，所以我们需要通过JS遍历所有绝对定位子元素，计算每个元素的底部偏移量（元素的top值 + 自身高度），取最大值作为父容器的高度，这样容器就能刚好包裹所有子元素，下方的"Photography"标题自然会紧跟在容器正下方。

完整实现代码 #

HTML结构 #

<div class="relative-container">
  <div class="absolute-child" style="top: 0; left: 0;">子元素1</div>
  <div class="absolute-child" style="top: 50px; left: 100px;">子元素2（内容更多，高度更高）</div>
  <div class="absolute-child" style="top: 20px; left: 200px;">子元素3</div>
</div>
<h2>Photography</h2>

CSS样式 #

.relative-container {
  position: relative;
  width: 100%;
  height: 0; /* 初始高度设为0，由JS动态更新 */
  background-color: #f5f5f5;
  border: 1px dashed #ddd;
}

.absolute-child {
  position: absolute;
  padding: 12px;
  border: 1px solid #666;
  background-color: #fff;
  /* 子元素高度由内容自动撑开，无需手动设置 */
}

原生JS代码 #

function setContainerHeight() {
  const container = document.querySelector('.relative-container');
  const childElements = container.querySelectorAll('.absolute-child');
  let maxBottomPosition = 0;

  childElements.forEach(child => {
    // 获取子元素相对于父容器的top偏移值
    const computedTop = parseInt(window.getComputedStyle(child).top);
    // 获取子元素的实际高度（含内边距、边框）
    const childHeight = child.offsetHeight;
    // 计算该子元素的底部位置
    const bottomPos = computedTop + childHeight;

    // 更新最大底部位置
    if (bottomPos > maxBottomPosition) {
      maxBottomPosition = bottomPos;
    }
  });

  // 将容器高度设置为最大底部位置
  container.style.height = `${maxBottomPosition}px`;
}

// 页面加载完成后执行一次
window.addEventListener('load', setContainerHeight);

// 如果子元素内容会动态变化（比如加载图片、修改文本），可监听resize或手动触发
window.addEventListener('resize', setContainerHeight);
// 示例：如果子元素内容更新后，调用 setContainerHeight() 重新计算高度

关键说明 #

• 保留定位特性：父容器position: relative、子元素position: absolute的设置完全保留，你依然可以单独控制每个子元素的top/left等定位属性。
• 动态适配：如果子元素内容会动态改变，只需在内容更新后手动调用setContainerHeight()，或者添加对应的事件监听（比如图片加载完成事件）自动触发计算。
• 计算准确性：使用getComputedStyle获取top值确保是最终生效的样式，offsetHeight能准确获取元素实际占据的高度，避免因盒模型设置导致的误差。

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