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)

6 Lösungen für Netzwerkfehler im Docker-Container

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

6 Lösungen für Netzwerkfehler im Docker-Container

Acht gängige SQL-Verwendungsbeispiele in MySQL

SQL Left Join und Right Join - Prinzip und Beispielanalyse

jQuery Canvas generiert ein Poster mit einem QR-Code

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (1)

Schritte zur Installation von MySQL 5.7.10 auf Windows Server 2008 R2

So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

So implementieren Sie eine Array-Lazy-Evaluation-Bibliothek in JavaScript

Detaillierte Beispiele für Variablen- und Funktionspromotion in JavaScript

Artikel empfehlen

Der Cloud-Server verwendet Baota, um eine Python-Umgebung zu erstellen und das Django-Programm auszuführen

So ändern Sie das Terminal in Ubuntu 18 in eine schöne Eingabeaufforderung

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

Implementierung der MySQL8.0.11-Datenverzeichnismigration

Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite

Erläuterung des Vue.js $refs-Anwendungsfalls

Implementierungscode für die bidirektionale Kommunikation zwischen Node und Python

Grafische Anweisungen zum Hoch- und Herunterladen von Dateien auf einen Remote-Linux-Host basierend auf SecureCRT

Modularität in Node.js, npm-Paketmanager erklärt

Die letzten zwei Jahre mit User Experience

jQuery zum Erreichen des Sperrfeuereffekts

Vergleich der Vorteile von vue3 und vue2

Informationen zum Bereitstellen eines Webprojekts auf dem Alibaba Cloud Server (in 5 Schritten)

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)