So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

So zentrieren Sie den gesamten Seiteninhalt und passen die Höhe automatisch an den Inhalt an. Dies ist das häufigste Problem beim Erlernen von CSS-Layout. Nachfolgend finden Sie ein praktisches Beispiel mit anschließender ausführlicher Erläuterung.

Klicken Sie zunächst hier, um den tatsächlichen Laufeffekt zu sehen. Diese Seite kann in den Browsern Mozilla, Opera und IE zentriert und hochgradig adaptiv sein. Lassen Sie uns den Code analysieren:

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<style type="text/css">
Körper{
Hintergrund:#999;
Textausrichtung: zentriert;
Farbe: #333;
Schriftfamilie: Arial, Verdana, Sans-Serif;
}
#header{
Breite: 776px;
Rand rechts: automatisch;
Rand links: automatisch;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe: 60px;
Textausrichtung: links;
} #enthalten{
Rand rechts: automatisch;
Rand links: automatisch;
Breite: 776px;
} #mainbg{
Breite: 776px;
Polsterung: 0px;
Hintergrund: #60A179;
schweben: links;
}
#Rechts{
schweben: rechts;
Rand: 2px 0px 2px 0px;
Polsterung: 0px;
Breite: 574px;
Hintergrund: #ccd2de;
Textausrichtung: links;
}
#links{
schweben: links;
Rand: 2px 2px 0px 0px;
Polsterung: 0px;
Hintergrund: #F2F3F7;
Breite: 200px;
Textausrichtung: links;
}
#Fußzeile{
klar: beides;
Breite: 776px;
Rand rechts: automatisch;
Rand links: automatisch;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe: 60px;}
.text{margin:0px;padding:20px;}
</Stil>
</Kopf>
<Text>
<div id="header">Kopfzeile</div>
<div id="enthalten">
<div id="mainbg">
<div id="rechts">
<div
class="text">rechts<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="links">
<div class="text">links</div>
</div>
</div>
</div>
<div id="footer">Fußzeile</div>
</body>
</html>

Code-Analyse:
Zuerst definieren wir den Body und die erste Zeile #header ganz oben. Der Schlüssel dabei ist text-align:center; im Body und margin-right: auto;margin-left: auto; im Header. Diese beiden Sätze zentrieren den Header. Hinweis: Tatsächlich hat die Definition von text-align:center; bereits eine Zentrierung im Internet Explorer erreicht, ist aber in Mozilla ungültig. Sie müssen margin:auto; festlegen, um eine Zentrierung in Mozilla zu erreichen.

Als nächstes definieren Sie die beiden mittleren Spalten #right und #left. Um die beiden mittleren Spalten zu zentrieren, verschachteln wir eine Ebene #contain außerhalb von ihnen und setzen margin:auto; für contain, sodass #right und #left natürlich zentriert sind.
Beachten Sie die Reihenfolge, in der die beiden mittleren Spalten definiert werden. Wir definieren zuerst #right und verwenden float: right;, um es ganz rechts in der Ebene #contain schweben zu lassen. Definieren Sie dann #left und verwenden Sie float: left;, um es links von der Ebene #right schweben zu lassen. Dies ist genau das Gegenteil der Reihenfolge, in der wir die Tabelle zuvor von links nach rechts definiert haben (Korrektur: Es kann entweder zuerst links und dann rechts oder zuerst rechts und dann links implementiert werden; gestalten Sie es nach Ihren Anforderungen).

Wir können sehen, dass zwischen #contain und den beiden Spalten im Code eine Ebene #mainbg verschachtelt ist. Wofür wird diese Ebene verwendet? Diese Ebene wird verwendet, um den Hintergrund von #contain zu definieren. Sie fragen sich vielleicht, warum der Hintergrund nicht direkt in #contain definiert wird, anstatt eine zusätzliche Ebene hinzuzufügen? Das liegt daran, dass der direkt in #contain definierte Hintergrund in Mozilla nicht angezeigt wird und daher der Höhenwert definiert werden muss. Wenn ein Höhenwert definiert ist, kann die rechte Ebene nicht automatisch basierend auf dem Inhalt skaliert werden. Um die Hintergrund- und Höhenprobleme zu lösen, ist es notwendig, eine solche #mainbg-Ebene hinzuzufügen. Der Trick besteht darin, float: left; in der Ebene #mainbh zu definieren, da float der Ebene automatisch Breiten- und Höhenattribute zuweist. (Verstehen wir es vorerst so:)

Schließlich definiert die Ebene #footer den unteren Teil. Der Schlüssel zu dieser Definition lautet: clear:both;, wodurch die schwebende Vererbung der Ebene #footer aufgehoben wird. Andernfalls wird #footer direkt neben #header angezeigt, anstatt unter #right.
Nachdem die Hauptebenen definiert sind, ist das Layout fertig. Eine weitere Ergänzung: Sie können sehen, dass ich auch eine .text{margin:0px;padding:20px;} definiert habe. Der Zweck dieser Klasse besteht darin, einen 20px großen Leerraum um den Inhalt herum zu erstellen. Warum definieren Sie Ränder oder Innenabstände nicht direkt in #right? Da Mozilla und IE das CSS-Boxmodell unterschiedlich interpretieren, führt die direkte Definition von Rändern/Innenabständen zu Layoutverzerrungen in Mozilla. Normalerweise löse ich dieses Problem, indem ich innen eine weitere Schicht hinzufüge.

<<: Docker installiert MySQL und löst das chinesische verstümmelte Problem

>>: MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

Verwenden von JavaScript in HTML

Ein zeitaufwändiger Fehlerbehebungsprozess für einen Docker-Fehler

CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Detaillierter Installationsprozess von Jenkins unter Linux

Die JD Vue3-Komponentenbibliothek unterstützt den detaillierten Prozess der Miniprogrammentwicklung

So sichern Sie das Skript für Linux-Server automatisch (MySQL, Sicherung von Anhängen)

Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)

So legen Sie eine feste IP-Adresse in einer virtuellen CentOS7-Maschine fest

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 2

Artikel empfehlen

Mehrere Möglichkeiten, Axios in Vue zu kapseln

MySQL 5.7.20 Zip-Installations-Tutorial

Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React

Beispiel für die Verwendung von Docker zum Erstellen eines ELK-Protokollsystems

html Option deaktivieren auswählen auswählen deaktivieren Option Beispiel

Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx

Eine kurze Diskussion über die spezifische Verwendung von Ansichtsfenstern in mobilen Endgeräten

HTML+jQuery zur Implementierung einer einfachen Anmeldeseite

Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst

Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster

CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche