Question

是否可以使具有position: absolute;的元素具有其父级的完整高度，包括溢出的内容？

在以下代码段中，滚动.line时.container元素被切断：

.container {
  position: relative;
  height: 150px;
  width: 300px;
  overflow-y: scroll;
}

.line {
  position: absolute;
  background: #000;
  width: 2px;
  left: 50%;
  height: 100%;
}

<div class="container">
  <div class="line"></div>
  <div style="height: 500px;"></div>
</div>

Answer 1

绝对定位元素的height: 100%;指的是相对父对象的给定CSS高度（即CSS规则中定义的高度），而不是溢出时的拉伸“实际高度”。因此它将始终具有通过CSS定义的初始父高度。

要实现所需的功能，您必须通过javascript获取父级高度并将其应用于子级。

Answer 2

添加另一个包装可以解决此问题：

.container {
  height: 150px;
  width: 300px;
  overflow-y: scroll;
}
.container > div {
  position: relative;
}

.line {
  position: absolute;
  background: #000;
  width: 2px;
  left: 50%;
  height: 100%;
}

<div class="container">
  <div>
    <div class="line"></div>
    <div style="height: 500px;"></div>
  </div>
</div>

高度：溢出内容的100％

2 个答案: