Heim >Web-Frontend >CSS-Tutorial >Wie kann ein Div die verbleibende Höhe der Seite einnehmen?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-09 05:30:02666Durchsuche

How to make a div occupy the remaining height of the page?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn