Wie kann ein Div die verbleibende Höhe der Seite einnehmen?

Erzielen einer optimalen Belegung der Div-Höhe

Bei der Arbeit mit Weblayouts ist es häufig erforderlich, dass ein Div die verbleibende Höhe der Seite einnimmt. Nehmen wir den folgenden Fall: zwei Divs, eines mit fester Höhe und das andere soll den verbleibenden Platz ausfüllen.

<div>

Um sicherzustellen, dass div2 die verbleibende Höhe der Seite einnimmt, besteht eine effektive Lösung darin Verwenden Sie eine absolute 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 */
}

Bei diesem Ansatz behält div1 seine feste Höhe bei, während div2 absolut positioniert wird, beginnend am unteren Rand von div1 und an der Stelle verbleibender vertikaler Raum bis zum unteren Rand der Seite, wodurch die verbleibende Höhe effektiv ausgefüllt wird.

Das obige ist der detaillierte Inhalt vonWie kann ein Div die verbleibende Höhe der Seite einnehmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!