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
Grundlegendes Lernen und Erfahrungsaustausch zu MySQL-Transaktionen
Eine Transaktion ist eine logische Gruppe von Ope...
MySQL 5.7.18 Installations-Tutorial unter Windows
In diesem Artikel wird erklärt, wie Sie MySQL aus...
Detaillierte Erläuterung von drei Lösungen für den Website-Footer-Sinking-Effekt
Hintergrund Viele Website-Designs bestehen im All...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.18 Zip-Version (Win7)
Die Installation der mysql5.7.18zip-Version unter...
So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen
Mysqldump wird für logische Backups in MySQL verw...
So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx
Inhaltsverzeichnis 1. Konsul-Cluster bereitstelle...
Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit
Dies liegt daran, dass der Datenbankserver so ein...
Details zur Verwendung von „order by“ in MySQL
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Analyse von drei Parametern des MySQL-Replikationsproblems
Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...
JavaScript implementiert Informationen zur Kennwortfeldüberprüfung
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierte Schritte zur Installation von MySQL auf CentOS 7
Wenn wir in CentOS7 MySQL installieren, wird Mari...
Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte
In diesem Artikel wird eine detaillierte Erläuter...
Vue3 (III) Website Homepage Layout Entwicklung
Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...
Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung
1. So zeigen Sie das Datum rechts in der Artikelti...
Implementierungsschritte zur Installation eines FTP-Servers in Ubuntu 14.04
Inhaltsverzeichnis Installieren Softwareverwaltun...