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

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)

Artikel empfehlen

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

CSS-Kombinationsselektoren umfassen verschiedene ...

Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)

Deinstallieren von MySQL 1. Deinstallieren Sie in...

Probleme beim Erstellen von Platzhaltern für HTML-Auswahlfelder

Ich verwende einen Platzhalter in einer Texteinga...

Verwenden von JavaScript-Unterschieden zum Implementieren eines Vergleichstools

Vorwort Bei der Arbeit muss ich jede Woche die vo...

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Webdesign und -entwicklung sind harte Arbeit, als...

So erstellen Sie geplante Aufgaben mit dem Crond-Tool in Linux

Vorwort Crond ist ein Tool zur geplanten Ausführu...

MySQL-Löschfunktion für Mehrfachtabellenverbindungen

Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...

Eine kurze Einführung in die einfache Verwendung der CentOS7-Firewall und offener Ports

Übersicht (offiziell gibt es eine ausführlichere ...

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...

Detaillierte Erläuterung der Anmeldung oder Übermittlung von Linux-Curl-Formularen und der Cookie-Nutzung

Vorwort In diesem Artikel wird hauptsächlich erlä...

Erläuterung der JavaScript-Funktionssyntax

Inhaltsverzeichnis 1. Gewöhnliche Funktionen 2. P...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...

Implementierungscodebeispiel für die lokale Verzeichniszuordnung von Nginx

Manchmal müssen Sie auf einige statische Ressourc...

So verwenden Sie das href-Attribut des HTML-Tags a, um relative und absolute Pfade anzugeben

Bei der tatsächlichen Webentwicklung ist für das ...

So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung

Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...