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

765 Leute haben es durchsucht

How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?

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

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

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!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich Text auf dem Bild anzeigen, ohne Tooltips zu verwenden? Nächster Artikel：Warum wählt „querySelector“ nur das erste Element in der Klasse „.weekdays“ aus?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2015

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2183

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1841

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...