Schema des zweispaltigen Website-Layouts in CSS

Lassen Sie uns ein zweispaltiges Layout der folgenden Art erstellen:

Zuerst erstellen wir die grundlegende Seitenstruktur:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

Nun weisen wir dem Wrapper Styles zu, indem wir ihn zentriert auf dem Bildschirm ausrichten:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Lassen Sie uns nun die Styles für Header und Footer festlegen:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

Wie Sie sehen, weisen wir Header und Footer eine Höhe zu. Wir tun dies, da sie in unserem Schema keinen Inhalt haben. Bei vorhandenem Inhalt sollte die Höhe der Blöcke nicht festgelegt werden - sie wird sich durch ihren Inhalt ergeben.

Beachten Sie auch, dass wir ihnen keine Breite zuweisen. Tatsache ist, dass Header und Footer blockbildende Elemente sind und ihre Breite automatisch der Breite des Wrappers entspricht.

Lassen Sie uns ihnen nun padding zuweisen, damit der Text nicht an den Grenzen klebt:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

Das Vorhandensein von padding wirkt sich jedoch negativ auf die Blockgrößen aus - sie werden größer als angegeben. Lassen Sie uns das Verhalten aller Blöcke so ändern, dass padding und Ränder unsere Blöcke nicht erweitern:

* {
	box-sizing: border-box;
}

Jetzt müssen wir Content und Sidebar in eine Reihe bringen. Machen wir das mit Flexbox:

#container {
	display: flex;
}

Weisen wir Content und Sidebar ihre Breite zu. Dabei muss die Summe ihrer Breiten der Breite des Wrappers entsprechen:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

Nehmen wir an, wir wollen einen Abstand zwischen Sidebar und Content erstellen. In diesem Fall muss der Sidebar ein margin zugewiesen werden. Dabei müssen wir jemandem die Breite für diesen margin abknapsen. Knapsen wir sie vom Content ab, indem wir entsprechend seine Breite reduzieren:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Lassen Sie uns nun die Höhe hinzufügen, da unsere Elemente keinen Inhalt enthalten. Es reicht aus, nur einem Element Höhe hinzuzufügen, denn das zweite Flex-Element wird sich in der Höhe anpassen (warum?). Weisen wir dem Content die Höhe zu:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Fügen wir Content und Sidebar die restlichen Styles hinzu:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

Fertig, unser Layout ist bereit. Fassen wir den gesamten Code zusammen:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}