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
Echarts-Beispielcode zur Verwendung mehrerer X-Achsen zur Erstellung einer siebentägigen Wettervorhersage
Inhaltsverzeichnis UI-Design Echarts Beispieleffe...
Detaillierte Schritte zur Verwendung von AES.js in Vue
Verwendung der AES-Verschlüsselung Verschlüsselun...
Webseiten in Schwarzweiß umwandeln (kompatibel mit Google, Firefox, IE und anderen Browsern)
In die CSS-Datei schreiben Code kopieren Der Code ...
Detaillierte Erklärung der Linux-Less-Befehlsbeispiele
weniger Dateiname Datei anzeigen kleiner Dateinam...
Gogs+Jenkins+Docker automatisierte Bereitstellung von .NetCore-Schritten
Inhaltsverzeichnis Umgebungsbeschreibung Docker-I...
Verwenden Sie das Firebug-Tool, um die Seite auf dem iPad zu debuggen
Wie debuggt man eine Seite auf dem iPad? Wenn Sie ...
Vue3.0 handgeschriebener Karusselleffekt
In diesem Artikel wird der spezifische Code des h...
JavaScript implementiert ein KI-Tic-Tac-Toe-Spiel durch den Maximum- und Minimum-Algorithmus
Lassen Sie uns ohne weitere Umschweife den Screen...
Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop
1) Prozess 2) FSImage und Bearbeitungen Nodenode ...
SQL-basierte Abfrageanweisungen
Inhaltsverzeichnis 1. Einfache SELECT-Anweisung 1...
Vue-CLI - Aufzeichnung der Schritte zur mehrseitigen Verzeichnisverpackung
Seitenverzeichnisstruktur Beachten Sie, dass Sie ...
React implementiert den Beispielcode der Radiokomponente
Ziel dieses Artikels ist es, die Grundfunktionen ...
CocosCreator - modulares Lernskript
Modulares Cocos Creator-Skript Mit Cocos Creator ...
Nginx' praktische Methode zur Lösung domänenübergreifender Probleme
Trennen Sie Front- und Backend und lösen Sie domä...
Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1
Designer verfügen über eine eigene Schriftartenbi...