So sorgen Sie für eine hohe Konsistenz von CSS-Unterelementen mit übergeordneten Elementen
|
Absolute Positionierungsmethode: (1) Stellen Sie das übergeordnete Element auf relative Positionierung ein. Wenn die Höhe des übergeordneten Elements nicht angegeben ist, ändert sie sich mit der Höhe des untergeordneten Elements auf der linken Seite.
.übergeordnet {
/*Schlüsselcode*/
Position: relativ;
/*Andere Stile*/
Breite: 800px;
Farbe: #fff;
Schriftfamilie: „Microsoft Yahei“;
Textausrichtung: zentriert;
}
(2) Der Fall, in dem ein Element auf der linken Seite eine Mindesthöhe hat
.links {
Mindesthöhe: 700px;
Breite: 600px;
}
(3) Wenn das Element rechts dieselbe Höhe wie das übergeordnete Element haben soll, können Sie die absolute Positionierung verwenden. Wenn Sie nicht sowohl oben als auch unten schreiben möchten, können Sie eins schreiben und dann Höhe: 100 % schreiben, um denselben Effekt zu erzielen.
.Rechts {
/*Schlüsselcode*/
Breite: 200px;
Position: absolut;
oben: 0;
rechts: 0;
unten: 0;
/*Andere Stile*/
Hintergrund: #ccc;
}
(4) Vollständiger Beispielcode:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Die Höhe des untergeordneten Elements stimmt mit der des übergeordneten Elements überein</title>
<Stil>
.Elternteil{
Position: relativ;
Hintergrund: #f89;
Breite: 800px;
Farbe: #fff;
Schriftfamilie: „Microsoft Yahei“;
Textausrichtung: zentriert;
}
.links {
Mindesthöhe: 700px;
Breite: 600px;
}
.Rechts {
Breite: 200px;
Position: absolut;
oben: 0;
rechts: 0;
unten: 0;
Hintergrund: #ccc;
}
</Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
<div Klasse="links">
Die linke Seite hat eine unbestimmte Höhe. Die Höhe des übergeordneten Elements ändert sich mit der Höhe der linken Seite, und die rechte Seite ändert sich ebenfalls entsprechend. </div>
<div Klasse="rechts">
Die Höhe entspricht hier der Höhe des übergeordneten Elements </div>
</div>
</body>
</html>
(5) Wirkung
(6) Hier stellt sich die Frage: Was passiert, wenn die Höhe des untergeordneten Elements auf der rechten Seite die Höhe von .parent überschreitet?
.rechts-innen {
Hintergrund: limettengrün;
Höhe: 1024px;
}<div Klasse="rechts"> <div class="right-inner">Das untergeordnete Element von right hat eine Höhe von 1024px, was den Container beschädigen würde. Das Hinzufügen von overflow:auto zu .right verhindert einen Überlauf</div> </div> Das Wirkungsdiagramm sieht wie folgt aus:
Vollständiger Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Die Höhe des untergeordneten Elements stimmt mit der des übergeordneten Elements überein</title>
<Stil>
.Elternteil{
Position: relativ;
Hintergrund: #f89;
Breite: 800px;
Farbe: #fff;
Schriftfamilie: „Microsoft Yahei“;
Textausrichtung: zentriert;
}
.links {
Mindesthöhe: 700px;
Breite: 600px;
}
.Rechts {
Breite: 200px;
Position: absolut;
oben: 0;
rechts: 0;
Höhe: 100%;
Überlauf: automatisch;
Hintergrund: #ccc;
}
.rechts-innen {
Hintergrund: limettengrün;
Höhe: 1024px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
<div Klasse="links">
Die linke Seite hat eine ungewisse Höhe. Die Höhe des übergeordneten Elements ändert sich mit der Höhe der linken Seite, und die rechte Seite ändert sich ebenfalls entsprechend. </div>
<div Klasse="rechts">
<div class="right-inner">Das untergeordnete Element von right hat eine Höhe von 1024px, was den Container beschädigen würde. Das Hinzufügen von overflow:auto zu .right verhindert einen Überlauf</div>
</div>
</div>
</body>
</html>(7) Andere Ressourcen http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent Dies ist das Ende dieses Artikels darüber, wie man CSS-Unterelemente auf die gleiche Höhe wie ihre übergeordneten Elemente bringt. Weitere Informationen zur Höhe von CSS-Unterelementen und übergeordneten Elementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: MySQL InnoDB-Quellcodeanalyse für Transaktionssperren
>>: So integrieren Sie Bilder eleganter in Vue-Seiten
Artikel empfehlen
Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL
MySQL-Mehrtabellenabfrage (kartesisches Produktpr...
So lösen Sie das Problem des Befehlsfehlers, der durch das Überschreiben des ursprünglichen Pfads und die Meldung „Befehl nicht gefunden“ verursacht wird
Ein Kollege bat mich, ihm dabei zu helfen, heraus...
Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8
Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...
Verwenden von Schleifen in awk
Lernen wir verschiedene Arten von Schleifen kenne...
So installieren Sie Mysql5.7 in Centos6
Umfeld Centos 6.6 MySQL 5.7 Installieren Falls da...
Beispiel für asynchronen Dateiupload in HTML
Code kopieren Der Code lautet wie folgt: <form...
Docker-Image-Optimierung (von 1,16 GB auf 22,4 MB)
Inhaltsverzeichnis Der erste Schritt der Optimier...
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen
CSS-Kombinationsselektoren umfassen verschiedene ...
HTML-Kopfstruktur
Im Folgenden werden die häufig verwendete Kopfstr...
Nginx verbietet den direkten Zugriff über IP und leitet auf eine benutzerdefinierte 500-Seite weiter
Direkt zur Konfigurationsdatei Server { listen 80...
TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial
Bei der Installation von tortoiseGit gab es immer...
iFrame-Mehrschichtverschachtelung, unbegrenzte Verschachtelung, hochadaptive Lösung
Es gibt drei Seiten A, B und C. Seite A enthält Se...
Eine detaillierte Einführung in die CSS-Namensspezifikation BEM von QQtabBar
BEM von QQtabBar Zunächst einmal: Was bedeutet BE...
Wie man mit React elegant CSS schreibt
Inhaltsverzeichnis 1. Inline-Stile 2. Importmetho...
So installieren und konfigurieren Sie MySQL und ändern das Root-Passwort
1. Installation apt-get install mysql-server erfo...