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)

Installation und Verwendung von TypeScript und grundlegende Datentypen

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

Installation und Verwendung von TypeScript und grundlegende Datentypen

So fügen Sie Videos in HTML ein und machen sie mit allen Browsern kompatibel

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)

Lösung für das Problem, dass VMware Workstation Pro aufgrund eines Win10-Updates nicht geöffnet werden kann

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen

Lösungsbeispiel und Erklärung für Fehler beim Importieren und Exportieren von Daten in MySQL-Datenbanken

MySQL-Einschränkungstypen und Beispiele

mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums

LINUX Prüft, ob der Port belegt ist

Artikel empfehlen

WeChat Mini-Programm: Position des Videofeuers zufällig

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?

MySQL-Interviewfragen: So richten Sie Hash-Indizes ein

Zusammenfassung einiger Tipps zum MySQL-Indexwissen

So konfigurieren Sie MySQL auf einem Ubuntu 16.04-Server und aktivieren die Remote-Verbindung

15 Zeilen CSS-Code können zum Absturz von Apple-Geräten führen, und das neueste iOS 12 ist nicht immun

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen

HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren

Einführung in die Vue-Schaltflächenberechtigungssteuerung

So verwenden Sie & und nohup im Hintergrund von Linux