Wie kann ein DIV-Element die verbleibende Seitenhöhe nach einem anderen DIV einnehmen?

Verbleibende Seitenhöhe mit DIV-Elementen belegen

In der Webentwicklung ist es oft notwendig, ein Element zu haben, das seine Höhe automatisch anpasst, um das auszufüllen verbleibender Platz auf der Seite. In diesem Fall besteht die Frage darin, dafür zu sorgen, dass das zweite DIV (#div2) die verbleibende Höhe einnimmt, nachdem das erste DIV (#div1) berücksichtigt wurde.

Um dies zu erreichen, wird die absolute CSS-Positionierung verwendet:

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

Bei der absoluten Positionierung wird #div2 aus dem normalen Seitenfluss entfernt und seine Position wird relativ zu seinem nächstgelegenen positionierten Vorgänger bestimmt (#div1)

• Dieser Ansatz ermöglicht es #div2, seine Höhe basierend auf der Seitenhöhe dynamisch anzupassen und sicherzustellen, dass es den gesamten verbleibenden Platz unter #div1 einnimmt.

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