如何基于absolute定位子元素高度调整relative定位父元素高度（无脚本）

问题原因 #

设置了position: absolute的元素会脱离正常文档流，父元素计算自身高度时不会把这类脱离流的子元素纳入统计，因此你当前的.parent元素没有正常流内容撑起高度，最终表现为高度0px。

纯CSS实现方案（无需脚本） #

CSS规范本身规定绝对定位元素不参与父级高度计算，没有通用的自动感知任意绝对子元素高度撑高父级的方案，你可以根据自己的场景选择以下适配方案：

方案1：固定父级高度（适用子元素位置/高度固定的场景） #

直接按照你最后一个绝对定位子元素的top值 + 子元素自身高度，给父级设置固定高度即可：

.parent{
  position:relative;
  background:green;
  height: 80px; /* 可根据实际子元素尺寸调整，本示例按子元素高度20px计算：最后一个子元素top60px + 自身高度20px = 80px */
  border:1px solid #000000;
  width:250px;
}
.child{position:absolute;}

方案2：替换布局逻辑（适用需要自动撑高的场景） #

如果没有必须使用绝对定位的强需求，直接去掉子元素的position: absolute，用margin控制垂直间距，父级会自动被内容撑高，和你预期的视觉效果完全一致：

.parent{
  background:green;
  border:1px solid #000000;
  width:250px;
  padding-top: 20px;
  box-sizing: border-box;
}
.child{
  margin-bottom: 20px;
}

方案3：添加占位元素（适用必须保留绝对定位、不想硬写父级高度的场景） #

在父元素末尾添加一个不可见的占位元素，把占位元素的高度设置为你需要的父级总高度，用占位元素撑起父级高度：

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
    <div class="placeholder"></div>
</div>

.parent{
  position:relative;
  background:green;
  border:1px solid #000000;
  width:250px;
}
.child{position:absolute;}
.placeholder{
  height: 80px;
  visibility: hidden;
  pointer-events: none;
}

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