Machen div's Höhe 100% der Elternhöhe einschließlich Überlauf

Question

Nehmen wir an, ich habe ein div, das overflow:auto und eine Bildlaufleiste als Ergebnis hat. Ich möchte ein div hinzufügen, das das gesamte Eltern-div beim Scrollen berücksichtigt, nicht nur die Höhe des Eltern-divs, wie es auf dem Bildschirm gerendert wird.

Wenn meine Beschreibung ein wenig unklar ist, sehen Sie sich den Code und die JSFiddle unten an. Ich möchte, dass sich die rote Spalte bis zum unteren Rand des übergeordneten Elements erstreckt, wenn Sie das übergeordnete Element nach unten scrollen. Sie sollten den unteren Teil der roten Box nicht sehen können.

Wie kann ich das tun?

Here it is in a JSFiddle

.parent { 
 
    overflow: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
.line { 
 
    border-bottom: 1.5px solid black; 
 
    height: 50px; 
 
    margin-left: 7px; 
 
    margin-right: 7px; 
 
    position: relative; 
 
} 
 
.box { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
    background-color: red; 
 
    width: 50%; 
 
    left: 20%; 
 
    z-index: 10; 
 
}

<div class="parent"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

Mögliche mit der folgenden Frage und Antwort dupliziert.

Position: absolute and parent height?

Sie tun es nur mit JavaScript, da das absolute Element vollständig aus Dokumentenfluss war, kann es nur mit Elternelement auszurichten.

Fügen Sie zwei Zeilen js wie unten hinzu, damit es wie erwartet funktioniert.

var scrollParentHeight = document.getElementsByClassName('parent')[0].scrollHeight 
document.getElementsByClassName('box')[0].style.height = scrollParentHeight + 'px';