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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何让子元素高度自动跟随父元素滚动内容长度？》，聊聊，希望可以帮助到正在努力赚钱的你。

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

在 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 定位的祖先元素进行定位。
• 祖先元素的属性（如高度）可以通过绝对定位的元素来获取。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何让子元素高度自动跟随父元素滚动内容长度？》文章吧，也可关注golang学习网公众号了解相关技术文章。