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

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems

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

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems

So verwenden Sie die REM-Anpassung in Vue

MySQL5.7.27-winx64 Version Win10 Download- und Installations-Tutorial-Diagramm

So überwachen Sie Oracle-Datenbanken mit Zabbix Agent2

JavaScript-OffsetParent-Fallstudie

Eine kurze Analyse der CSS-Funktionen :is() und :where(), die bald in Browsern verfügbar sein werden

CentOS7 verwendet yum zur Installation von MySQL 8.0.12

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Das WeChat-Applet realisiert den Effekt des Siebschüttelns

Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen

Artikel empfehlen

Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation

Sprechen Sie kurz über MySQL Left Join Inner Join

Implementierung der DOM-Operation in React

jQuery implementiert einen Zeitselektor

MySQL verwendet einen abdeckenden Index, um Tabellenrückgaben zu vermeiden und die Abfrage zu optimieren

Einfache Implementierungsmethode der Vue3-Quellcodeanalyse

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

jQuery implementiert einen einfachen Karusselleffekt

Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse

Beispiel für die Verwendung von Docker Compose zum Erstellen einer Consul-Clusterumgebung

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

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

MAC+PyCharm+Flask+Vue.js-Build-System

HTML-Tabellen-Markup-Tutorial (40): Dunkles Rahmenfarbattribut der Kopfzeile BORDERCOLORDARK

WebStorm kann die Lösung der Vue3-kombinierten API nicht korrekt identifizieren