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

发布日期： 2024-10-27 阅读量： 作者： 网络

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

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

包裹滚动内容：

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

移动overflow属性：

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

修改子元素定位：

将子元素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>

# overflow

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯4803 】【 SEO推广4797 】

下一篇: windows怎么设置默认打印机

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

随便看看