CSS/Tutorials/feststehender footer mit Flexbox

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Immer wieder wird gefragt, wie ein feststehender footer am unteren Rand einer Seite mit wenig Inhalt positioniert werden kann. Früher konnten Sie einen feststehenden footer mit position: fixed realisieren.

In diesem Tutorial soll gezeigt werden, wie einfach eine Umsetzung mit Flexbox ist.

Anwendungsbeispiel[Bearbeiten]

Gerade bei 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.

Beispiel ansehen …
  <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, indem flexible Elemente (items) innerhalb eines Elternelements auf die noch verfügbaren Leerräume verteilt oder entsprechend gestaucht werden:

Beispiel ansehen …
body {
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
  }
 
  main {
    min-height: 100px;
    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 entfernt den Außenabstand, 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.

Der footer bleibt in seiner natürlichen Höhe immer am unteren Rand der Webseite.

Weblinks[Bearbeiten]