Высота: 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>@TemaniAfif Спасибо, но это увеличивает высоту родительского элемента.
ай да переполнение будет считаться ...
У пользователей @Roope IE и Edge уже много сломанных вещей, поэтому они этого не заметят: p
Ответы 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>
просто сделайте высоту очень-очень большой ... это вне потока, чтобы у вас не было проблем