如何让绝对定位的子div继承父div高度并随其高度变化？

问题核心在于绝对定位元素的参照对象和父元素的定位上下文：

• .timeline使用position:absolute，但父元素.tea-history未设置position:relative，导致.timeline会相对于视口而非父元素定位，因此height:100%取页面高度，height:inherit也因父元素height:auto无法继承有效高度。
• 父元素原本固定的height:800px是临时方案，要实现随内容自适应，必须移除固定高度。

具体修改步骤： #

1. 给父元素.tea-history添加position:relative，建立定位上下文，让子元素的绝对定位以它为参照。
2. 调整.timeline的样式：
   • 将height:inherit改为height:100%，此时高度会基于父元素的实际高度计算。
   • 用top和left替代margin-top和margin-left，避免绝对定位下margin的偏移问题。
3. 移除.tea-history的固定height:800px，让它随内容自动撑开高度。

修改后的完整CSS代码： #

.tea-history {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  margin-bottom: 20px;
  width: 90%;
  position: relative; /* 添加定位上下文 */
  /* 移除固定height:800px，让高度随内容自适应 */
}

.tea-history .timeline {
  position: absolute;
  height: 100%; /* 相对于父元素高度 */
  width: 3px;
  border-radius: 20px;
  background-color: #7aaa62;
  top: 50px; /* 替代margin-top */
  left: 50px; /* 替代margin-left */
}

.tea-history .frame {
  width: 80%;
  display: grid;
  grid-template-columns: 20px auto;
  gap: 33px;
  margin-top: 30px;
  margin-left: 42px;
}

.tea-history .frame .timeline-dot {
  display: flex;
  align-items: center;
}

.tea-history .timeline-dot .outer-dot {
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: #000 solid 3px;
}

.tea-history .timeline-dot .inner-dot {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #000000;
  margin-top: 2px;
  margin-left: 2px;
}

效果说明： #

• position:relative给父元素建立了定位边界，绝对定位的.timeline会以父元素的实际高度为基准。
• height:100%此时会自动匹配父元素由内容撑开的高度，无需固定数值。
• top/left的定位方式更符合绝对定位的逻辑，避免了margin在绝对定位下的意外偏移。

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