Heim > Web-Frontend > CSS-Tutorial > 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 Hamilton

Freigeben： 2024-11-08 08:53:02

Original

772 Leute haben es durchsucht

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Nach dem Login kopieren

Nach dem Login kopieren

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>

Nach dem Login kopieren

Nach dem Login kopieren

div1{

width: 100%;
height: 50px;
background-color:red;/*Development Only*/

Nach dem Login kopieren

}

div2{

width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/

Nach dem Login kopieren

}

<div>

Nach dem Login kopieren

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!