Высота: 100% переполненного содержимого

Возможно ли, чтобы элемент с 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>

🤔 А знаете ли вы, что...
CSS позволяет задавать стили для разных состояний печати, такие как ландшафт или портрет.


1
60
2

Ответы:

height: 100%; абсолютно позиционированного элемента относится к данной высоте CSS (то есть высоте, определенной в правиле CSS) относительного родителя, а не к его растянутой «реальной высоте» при переполнении. Таким образом, он всегда будет иметь начальную родительскую высоту, которая определяется через CSS.

Чтобы добиться того, чего вы хотите, вам нужно получить родительскую высоту через javascript и применить ее к дочернему элементу.


Решено

Добавление другой оболочки может решить проблему:

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