Flexbox/Feststehender Footer
- 15min
- mittel
- Grundkenntnisse in
Immer wieder wird gefragt, wie ein feststehender Footer am unteren Rand einer Seite mit wenig Inhalt positioniert werden kann.
Früher musste man einen feststehenden Footer mit position: fixed oder gar JavaScript realisieren.
In diesem Tutorial soll gezeigt werden, wie einfach eine Umsetzung mit Flexbox ist.[1]
Inhaltsverzeichnis
Gerade bei Seiten mit wenig Inhalt wie Login-Seiten, der Ausgabe von Suchergebnissen etc. gibt es oft Webseiten, in denen der Footer mit Impressum und Kontaktinformationen in der Mitte der Seite positioniert ist und das eigentlich gewünschte Layout zerschießt.
<main>
<h2>main</h2>
</main>
<footer>
<h2>footer</h2>
</footer>
In diesem Beispiel gibt es nur wenig Markup. Der footer hängt direkt unter dem main-Element weit oberhalb des unteren Randes.
Flexbox ist ein Layoutkonzept, bei dem flexible Elemente (items) innerhalb eines Elternelements auf die noch verfügbaren Leerräume verteilt oder entsprechend gestaucht werden:
body {
display: flex;
min-height: 100vh;
margin: 0 auto;
flex-direction: column;
}
main {
min-height: 5em;
flex: 1;
}
Der Body erhält eine Mindestgröße von 100vh, damit er sich über die gesamte Höhe des Viewports erstreckt. Die Angabe von margin: 0 auto entfernt den Außenabstand oben und unten, sodass keine Scrollbalken entstehen. Mit display: flex wird er zum flexiblen Container, der mit flex-direction: column senkrecht orientiert wird.
Innerhalb des flexiblen Containers behalten Kindelemente ihre natürliche bzw. klassisch festgelegte Höhe. Nur das main-Element wird mit flex: 1; über den verbleibenden Leerraum verteilt.
Bei wenig Inhalt steht der Footer am unteren Rand des Viewports; bei viel Inhalt folgt er dem Inhalt im normalen Dokumentfluss.
Feste Breite mit flexiblem padding
Im SELF-Forum wurde gefragt, ob es möglich ist, die Breite des Inhalts zu beschränken und zu zentrieren, wobei sich Hintergrundfarben und -Bilder aber über die gesamte Breite erstrecken sollen. Gunnar Bittersmann zeigte, wie's geht.[2]
Die Lösung verwendet die calc()-Funktion, mit der man die gewünschte Breite des Inhalts von der verfügbaren Breite abzieht. Das Hintergrundbild des main-Elements erstreckt sich aber über die gesamte Breite – die Überschrift wird wie Logo und Navigation in header bzw. die zwei Links im footer in der Mitte zentriert.
body > * {
padding: .5em;
padding-left: calc((100% - 20em) / 2);
padding-right: calc((100% - 20em) / 2);
}
Siehe auch
Weblinks
- ↑ Philipp Walton: Sticky Footer – Solved by Flexbox
- ↑ SELF-Forum: Seitenstruktur- und Layout-Frage vom 17.12.2018
→ Lösung von Gunnar Bittersmann
- Team Treehouse: Creating a Sticky Footer with Flexbox
