如何让子元素absolute根据父元素滚动内容的高度设置高度？

子元素absolute根据父元素滚动内容的高度设置高度

为了让子元素absolute根据父元素滚动内容的高度设置高度，需要对父元素进行一些调整：

1. 包裹滚动内容：

为滚动内容创建一个新的 div 元素，并将其定位为相对于父元素。这个新 div 设置 position: relative，使内容能够在其中进行定位。

2. 移动overflow属性：

将 overflow: auto 属性从滚动内容的子元素移动到父元素上。这样，父元素就可以对内容进行滚动，而滚动条会出现在父元素上。

3. 修改子元素定位：

将子元素absolute定位为相对于其新父元素。这样，子元素高度将自动调整为内容高度。

示例代码：

<div class="box">
  <div class="content">
    <div style="width: 100%; height: 300px; background-color: black; margin-bottom: 20px;"></div>
    <div style="width: 100%; height: 300px; background-color: black; margin-bottom: 20px;"></div>
    <div style="width: 100%; height: 300px; background-color: black; margin-bottom: 20px;"></div>
    <div style="width: 100%; height: 300px; background-color: black; margin-bottom: 20px;"></div>

    <div style="position: absolute; width: 100%; height: 100%; top: 0; background-color: aqua; opacity: 0.5;"></div>
  </div>
</div>

<style>
  .box {
    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .content {
    position: relative;
    width: 100%;
  }
</style>

以上就是如何让子元素absolute根据父元素滚动内容的高度设置高度？的详细内容，更多请关注其它相关文章！