So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen

1. Verwenden Sie die Floating-Methode

Effektbild:

Der Code lautet wie folgt: (Beachten Sie, dass die Höhe von .content 500px beträgt, was der Höhe des übergeordneten Elements entspricht, das schwebende Element sich jedoch über .content befindet und .content abdeckt. Ändern Sie den Hintergrundstil von .nav in background-color: rgba(0,0,0,0.1);, um den Effekt zu beobachten.)

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8" />
		<title>Höhe füllt den übergeordneten Container</title>
	</Kopf>
	<Stil>
		.übergeordnet {
			Höhe: 500px;
			Breite: 300px;
			Rand: 1px durchgehend rot;/***/
			Polsterung: 2px 2px;/***/
		}
		.nav {
			Höhe: 100px;
			Breite: 100 %;/*Erforderlich, volle Breite, um Schweben zu verhindern*/
			float: left;/*Erforderlich*/
			Hintergrundfarbe: rot;
		}
		.Inhalt {
			Höhe: 100 %;/*Erforderlich*/
			Hintergrundfarbe: grün;
		}
	</Stil>
	<Text>
		<div Klasse="übergeordnet">
			<div Klasse="nav">
				Feste Höhe </div>
			<div Klasse="Inhalt">
				Adaptiver übergeordneter Container, fülle den verbleibenden Platz aus </div>
		</div>
	</body>
</html>

2. Positionierung nutzen

Der Code lautet wie folgt: (Diese Methode wird empfohlen, da sie nicht die Nachteile der obigen Methode aufweist.)

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8" />
		<title>Höhe füllt den übergeordneten Container</title>
	</Kopf>
	<Stil>
		.übergeordnet {
			Position: relativ;
			Höhe: 500px;
			Breite: 300px;
			Rand: 1px durchgehend rot;/***/
			Polsterung: 2px 2px;/***/
		}
		.nav {
			Höhe: 100px;
			Breite: 100 %;
			Hintergrundfarbe: rot;
		}
		.Inhalt {
			Position: absolut;
			oben: 100px;
			unten: 0px;
			Hintergrundfarbe: grün;
			Breite: 100 %;
		}
	</Stil>
	<Text>
		<div Klasse="übergeordnet">
			<div Klasse="nav">
				Feste Höhe </div>
			<div Klasse="Inhalt">
				Adaptiver übergeordneter Container, fülle den verbleibenden Platz aus </div>
		</div>
	</body>
</html>

Damit ist dieser Artikel darüber, wie Sie mit CSS die Höhe eines untergeordneten Divs so einstellen können, dass sie den verbleibenden Platz seines übergeordneten Containers ausfüllt, abgeschlossen. Weitere Informationen dazu, wie Sie mit CSS die Höhe eines untergeordneten Divs so einstellen können, dass sie den verbleibenden Platz ausfüllt, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!

<<: JavaScript implementiert drei gängige Webeffekte (Offset, Client, Scroll-Serie).

>>: Allgemeiner HTML-Seitenstil (empfohlen)

Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit

So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen

1. Verwenden Sie die Floating-Methode

2. Positionierung nutzen

Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit

Verwenden von Puppeteer zum Implementieren der Screenshot-Funktion für Webseiten unter Linux (CentOS)

Beispielcode zur Implementierung der WeChat-Kontoaufteilung mit Nodejs

Detaillierte Erläuterung der JavaScript-Closure-Probleme

Zwei Ideen zur Implementierung der horizontalen Datenbanksegmentierung

So installieren Sie Composer unter Linux

MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene

Nutzungs- und Leistungsoptimierungstechniken für die Aggregatfunktion „count“ in MySQL

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)

Artikel empfehlen

Detaillierte Erklärung der Lösung für verweigerte Berechtigungen in Linux

So legen Sie den Rahmen einer Webseitentabelle fest

So ändern Sie die SSH-Portnummer in der Centos8-Umgebung

JS versteht die Zeitzonen GMT und UTC genau

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Nginx verbessert die Zugriffsgeschwindigkeit basierend auf der GZIP-Komprimierung

Einfache Anwendungsbeispiele für benutzerdefinierte MySQL-Funktionen

Hilfedokument „MySQL-Lernhinweise“

Detaillierte Erklärung der Webseiten-Screenshot-Funktion in Vue

Methoden und Techniken zur Gestaltung einer interessanten Website (Bild)

Lösung für das Problem, dass die MySQL-Konfigurationsdatei nicht geändert werden kann (Win10)

Lassen Sie die Webseite automatisch den Hochgeschwindigkeitsmodus des Dual-Core-Browsers aufrufen (Webkit)

So aktivieren oder deaktivieren Sie Linux-Dienste mit den Befehlen chkconfig und systemctl

Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse

Einige Fehler, die JavaScript-Anfänger häufig machen