Wie kann man in HTML und CSS dafür sorgen, dass ein Div die verbleibende Höhe einer Seite einnimmt?

Wie man Div in HTML und CSS dazu bringt, die verbleibende Höhe einzunehmen

In HTML kann es eine häufige Herausforderung sein, ein bestimmtes Layout zu erreichen, bei dem ein Div die verbleibende Höhe einnehmen muss verbleibende Höhe der Seite. Stellen Sie sich eine Situation mit zwei Divs vor:

<div>

Das Ziel besteht darin, dass #div2 die verbleibende Höhe der Seite ausfüllt. Hier ist eine Lösung mit absoluter Positionierung:

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* Development Only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* Development Only */
}

In diesem Code erhält #div1 eine feste Höhe von 50 Pixel, während #div2 absolut positioniert wird und den verbleibenden Platz einnimmt. Die Top-Eigenschaft ist auf 50 Pixel festgelegt, was der Höhe von #div1 entspricht. Die Eigenschaft „bottom“ ist auf 0 gesetzt, was bedeutet, dass #div2 am unteren Rand seines übergeordneten Elements verankert werden soll, in diesem Fall der Seite selbst. Dadurch wird #div2 dynamisch gestreckt, um die verbleibende Höhe der Seite einzunehmen.

Das obige ist der detaillierte Inhalt vonWie kann man in HTML und CSS dafür sorgen, dass ein Div die verbleibende Höhe einer Seite einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!