Wie erstelle ich in CSS eine zentrierte Spalte voller Höhe, fester Breite?

Implementieren eines CSS-Layouts mit einer zentralen Einzelspalte mit fester Breite und einer Höhenspanne von der Kopf- bis zur Fußzeile

Beim Entwerfen eines Website-Layouts kann die Erstellung eine Herausforderung sein eine einzelne zentrale Spalte mit fester Breite, die sich über die gesamte Höhe der Seite erstreckt, mit Ausnahme der Kopf- und Fußzeile. In diesem Artikel werden zwei mögliche Lösungen für dieses Problem mithilfe von reinem CSS untersucht.

Option 1: Verwendung von Flexbox für moderne Browser

Für Browser, die Flexbox unterstützen, besteht ein einfacher Ansatz in der Verwendung eines Flexbox-Containers:

html, body {height: 100%; padding: 0; margin: 0; width: 100%;}
body {display: flex; flex-direction: column;}
#main {flex-grow: 1;}

<header>header</header>
<div>

Option 2: Absolute Positionierung für eine breitere Browserkompatibilität

Für eine breitere Browserkompatibilität ein Alternativlösung ist die Verwendung der absoluten Positionierung:

body {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
header {position: absolute; top: 0; left: 0; right: 0; height: 50px;}
#main {position: absolute; top: 50px; bottom: 0; left: 50%; transform: translate(-50%, 0); width: calc(100% - 100px);}
footer {position: absolute; bottom: 0; left: 0; right: 0; height: 50px;}

<header>header</header>
<div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS eine zentrierte Spalte voller Höhe, fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!