Wie kann ein Div-Element die verbleibende Höhe einer Seite einnehmen?

Verbleibende Höhe für Div-Elemente belegen

Beim Webdesign kann es vorkommen, dass Sie dafür sorgen müssen, dass ein Div-Element die verbleibende Höhe einnimmt Höhe der Seite. Stellen Sie sich dieses Szenario vor: Sie haben zwei Divs mit dem folgenden Code:

<div>

Wie sorgen Sie dafür, dass div2 die verbleibende Höhe der Seite einnimmt?

Lösung: Absolute Positionierung

Um dies zu erreichen, können Sie die absolute Positionierung mit dem folgenden CSS nutzen:

#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 Dieser Code:

• Div1 hat eine feste Höhe von 50 Pixel und erstreckt sich über die gesamte Breite der Seite.
• Div2 ist absolut positioniert, wobei der obere Rand auf 50 Pixel eingestellt ist (die Höhe von Div1). ) und sein unterer Rand wird auf 0 gesetzt, wodurch er die verbleibende Höhe einnimmt.

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