Flexbox-Layout erklärt
Diese Seite demonstriert ein Layout mit Flexbox, bei dem der Body als Flex-Container in Spaltenrichtung (flex-direction: column) konfiguriert ist.
Main-Bereich
Der Hauptinhalt nimmt den verfügbaren Platz automatisch ein dank der Eigenschaft flex: 1 oder flex-grow: 1.
Footer
Der Footer bleibt immer am unteren Rand, da er mit margin-top: auto ausgestattet ist und der Body min-height: 100vh hat.
Vorteile
Dieses Layout ist responsiv, einfach zu implementieren und funktioniert auch bei wenig Inhalt im Main-Bereich perfekt.
CSS-Code für das Layout
/* Body als Flex-Container in Spaltenrichtung */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Main-Bereich wächst automatisch */
main {
flex: 1; /* Kurzform für flex-grow: 1 */
}
/* Footer bleibt unten */
footer {
margin-top: auto;
}
Ziehen Sie den unteren Rand dieses Fensters nach oben, um zu sehen, wie der Footer bei geringer Fensterhöhe immer unten bleibt. Bei viel Inhalt im Main-Bereich wird der Footer nach unten geschoben.