如何让子元素高度自动跟随父元素滚动内容长度？

如何让子元素按照父元素滚动内容的长度自动设置高度？

在 html 和 css 中，我们可以使用定位属性来控制元素的位置和大小。当我们需要让一个子元素的绝对高度跟随着其父元素的滚动内容长度时，可以使用以下方法：

解决方案：

我们可以给父元素添加 overflow: auto; 属性，使其产生滚动条。然后给子元素添加 position: absolute; top: 0; left: 0; width: 100%; height: 100%; 属性，使其绝对定位在父元素内，并且高度为其父元素的滚动内容长度。

参考代码：

<div class="outer">
  <div class="inner">
    <!-- 内容 -->
  </div>
</div>

.outer {
  overflow: auto;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

知识点：

• 设定元素的绝对定位（position: absolute）可以脱离普通文档流的约束，并相对于其最近的非 static 定位的祖先元素进行定位。
• 祖先元素的属性（如高度）可以通过绝对定位的元素来获取。