高度：溢出内容的100％

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

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

.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>

Answer 2

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

为了达到你想要的效果，你必须通过javascript获得父高度并将其应用于孩子。