CSS: Wie bleibt der Footer immer am unteren Rand?

Was einfach klingt, hat seine Tücken. Gerade als ich damit angefangen habe, mich mit CSS zu befassen, bin ich häufig auf das Problem gestoßen, dass die Fußzeile einfach nicht so recht das machen will was sie soll.

Um dieses Problem zu lösen habe ich viel herumprobiert und letztlich ein paar gute Lösungen gefunden. Eine davon möchte ich dir hier vorstellen.

Nehmen wir an, unser HTML-Markup sieht aus wie folgt:


<body>
  <div class="container">
    <div class="content-wrapper">

      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, modi quis eius eveniet soluta deserunt asperiores quae consequatur, sed ut autem odit in at ullam neque, exercitationem assumenda cupiditate cum!</p>
      </main>
    </div>

    <footer class="footer">
      <p>I am the footer.</p>
    </footer>

  </div>
</body>

</html>



Das Ziel:

Die Fußzeile <footer> soll immer am unteren Rand der Webseite sein, auch bei wenig Text.



Das Problem:

Beispielbild: Fußzeile bleibt am Seitenende
Beispielbild: Fußzeile bleibt am Seitenende




Wenn es wenig Text gibt, verschiebt sich die Fußzeile an unerwünschte Stellen.

Im ersten Beispiel bleibt die Fußzeile <footer> nicht am unteren Ende des Bildschirms, wenn es weniger Seiteninhalt gibt als der Bildschirm hoch ist.

Das zweite Beispiel kann erreicht werden indem wir unserer Fußzeile per CSS die Position fixed zuweisen.

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

Je nach Webseite kann diese Lösung sinnvoll sein und auch stimmig aussehen. Wir wollen aber, dass die Fußzeile sich immer unterhalb aller Inhalte der Webseite befindet, egal ob diese Inhalte aus viel oder wenig Text bestehen, so wie in den Beispielen 3 und 4 dargestellt.


Die Lösung: Position: Absolut.

Zuerst brauchen wir ein Kontainer-Div, das den kompletten Inhalt unserer Webseite umschließt. Diesem Kontainer geben wir die Position relative und eine Mindesthöhe von 100vh ( = viewport height).


.container {
  position: relative;
  min-height: 100vh;
}

Weil das Kontainer-Div jetzt eine relative Position hat, können wir dem Footer eine absolute Position geben, die sich an eben diesem Eltern-Element orientiert.



Damit bleibt der Footer unterhalb der Seiteninhalte, unabhängig von deren Textmenge.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem; /* Höhe der Fußzeile */

Allerdings stoßen wir so auf das Problem, dass Seiteninhalte von der Fußzeile verdeckt werden könnten. Wir haben der Fußzeile ja eine absolute Position gegeben, weshalb sie jetzt aus dem normalen Fluss der Webseite herausfällt.



Dieses Problem löst das Div „content-wrapper.“

.content-wrapper {
  padding-bottom: 3rem; /* Höhe der Fußzeile */
}

Es umschließt den kompletten Hauptinhalt der Webseite, nicht aber die Fußzeile. Um der Fußzeile immer genug Platz zu gewähren, bekommt das Div „content-wrapper“ ein Polster zum unteren Rand hin. Dieses Polster sollte genau so hoch sein wie die Fußzeile -in meinem Fall 3rem. Das kann aber natürlich beliebig angepasst werden.



So sieht das komplette CSS Sheet aus:

.container {
  position: relative;
  min-height: 100vh;
}

.content-wrapper {
  padding-bottom: 3rem; /* Footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem; /* Footer height */
}



Eine funktionierende Demo mit Code kannst du dir auf Codepen ansehen.

Am Besten funktioniert Codepen auf der externen Webseite. Diese erreichst du wenn du auf das Edit on Codepen Icon klickst.

See the Pen Footer always at bottom by Marty (@Marty-Development) on CodePen.



Hat dir mein Beitrag geholfen?

Oder hast du Fragen oder Feedback?

Schreib mir gerne einen Kommentar! 🙂
Ich freu mich auf einen Austausch mit dir.




→ Veröffentlicht am 02/05/2020 in CSS, Code & Co

→ Schlagwörter: , , , Einloggen um den Post zu editieren.

0 comments on “CSS: Wie bleibt der Footer immer am unteren Rand?

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.