问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
轩小浅
    84112

    image.png

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="box">
    <div class="b2">
      <div style="overflow: auto;position: relative;">
        <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>
  </div>

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

      display: flex;
      flex-direction: column;
    }

    .b2 {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  </style>
</body>

</html>

    代码在上面，我怎么样才能让子元素absolute根据父元素滚动内容的高度设置高度

    解决方案：

    参考评论解决方案(上述代码只需改动这个就行了)：

          <div style="overflow: auto;">
        <div style="position: relative;">
          <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>
    前端html5css
    阅读 1.8k
    1 个回答
    得票最新
    头像
    陟上晴明
      21.4k144991
      ✓ 已被采纳

      单独给内容区域在包裹一个 div，然后给这个 div 设置 position:relative。
      或者把 overflow:auto 属性移动到 .box 类上。

      一个简单的例子：

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      padding: 5px;
      border: 1px solid black;
      box-sizing: border-box;
    }
    .box {
      width: 500px;
      height: 500px;
      background-color: gray;
      overflow-y: scroll;
    }
    .content {
      width: 100%;
      height: 200vh;
      background-color: black;
      position: relative;
    }
    .float {
      width: 100px;
      height: 100%;
      background-color: aqua;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content">
      <div class="float"></div>
    </div>
  </div>
</body>
</html>

      知识点就一个：

      相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

      确定位置的同时也可以获取这个祖先元素的宽/高等属性

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题