Heim > Artikel > Web-Frontend > Wie kann ein Div-Element die verbleibende Seitenhöhe einnehmen und gleichzeitig eine feste Höhe für ein anderes Div beibehalten?
Wie kann ein Div-Element die verbleibende Seitenhöhe einnehmen und gleichzeitig eine feste Höhe für ein anderes Div beibehalten?
- Linda HamiltonOriginal
- 2024-11-08 08:53:02696Durchsuche
Aufrechterhaltung einer konsistenten Höhenverteilung mit Div-Elementen
Die Sicherstellung einer proportionalen Höhenverteilung zwischen mehreren Div-Elementen kann durch fortgeschrittene CSS-Techniken erreicht werden. Stellen Sie sich das folgende Szenario vor:
</p> <pre class="brush:php;toolbar:false"><div>
Das Ziel besteht darin, dass div2 die verbleibende Höhe der Seite einnimmt, während div1 seine feste Höhe beibehält.
Lösung: Absolute Positionierung
Durch Verwendung des folgenden CSS Stile können Sie das gewünschte Verhalten erreichen:
<div>
<div>
div1{
width: 100%; height: 50px; background-color:red;/*Development Only*/
}
div2{
width: 100%; position: absolute; top: 50px; bottom: 0; background-color:blue;/*Development Only*/
}
<div>
Erklärung
Durch die Anwendung der absoluten Positionierung auf div2 wird es aus dem normalen Seitenfluss entfernt und stattdessen basierend auf den angegebenen oberen und unteren Werten positioniert. Die Eigenschaft „top“ legt den Abstand vom oberen Rand von div1 fest, während die Eigenschaft „bottom“ dafür sorgt, dass das Element bis zum unteren Rand der Seite reicht. Die Breite von div2 ist auf 100 % eingestellt, um sich über die gesamte Breite der Seite zu erstrecken.
Mit dieser Technik können Sie die Höhe von div2 basierend auf der Höhe von div1 und der gesamten Seitenhöhe dynamisch anpassen und so eine konsistente Darstellung gewährleisten und ansprechendes Layout.
Das obige ist der detaillierte Inhalt vonWie kann ein Div-Element die verbleibende Seitenhöhe einnehmen und gleichzeitig eine feste Höhe für ein anderes Div beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!