Footer immer unten

Ein gängiger Seitenaufbau nach dem Strickmuster „Header – Content – Footer“ sieht in etwa so aus. HTML:

<html>
  <header> ... </header>
  <section> ... </section>
  <footer> ... </footer>
</html>

Hier mal ein dazu passendes CSS:

body {
  font-family: arial;
  margin:0;
  padding:0
}
header {
  background-color: #f89114;
  height: 130px;
  position: absolute;
  top: 0;
  width: 100%;
}
section {
  margin: 0 auto;
  max-width: 800px;
  padding: 130px 15px 15px;
}
footer {
  background-color: #005566;
  height: 130px;
  width: 100%;
}

Wenn man „kurze“ Seiten hat, also solche mit einem relativ niedrigen Content-Bereich, kann es passieren, dass der Footer mittig im Viewport hängt. Das ist etwas unschön:

Footerbeispiel 1
Footer mittig auf der Seite, unten ist noch Viewport über.

Hier mal ein Beispiel als HTML-Datei:

Footerbeispiel 1

Footer positionieren reicht nicht

Mit einer „absolute bottom“-Positionierung des Footers kleben wir zwar den Footer an die Unterkante des Viewports, können aber bei Verkleinerung des Viewports (schieben Sie mal bei der Beispieldatei das Browserfenster vertikal zusammen!) Content und Header „unter“ den Footer schieben:

footer {
  background-color: #005566;
  height: 130px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
Bei Verkleinerung des Viewports verschwinden Elemente „hinter“ dem Footer.

Hier die HTML-Datei:

Footerbeispiel 2

Die Lösung ist zweiteilig: Einerseits muss mit Höhenangaben für bestimmte Seitenelemente gearbeitet werden, andererseits muss mit Abständen und Positionen für Content und Footer gearbeitet werden:

1. Einsatz eines Seitenwrappers und mehrerer Höhenangaben

Alle Seitenelemente (hier: Header – Content – Footer) werden in einem Seitenwrapper eingefasst, denn wir benötigen zwei ganzseitige Elemente, denen wir eine Höhenangabe mitgeben können: Dem html-/body-Element wird die Höhe von 100% mitgegeben, wodurch die Anzeige automatisch die Höhe des gesamten zur Verfügung stehenden Viewports einnimmt, und dem Wrapper wird die Mindesthöhe von ebenfalls 100% mitgegeben, wodurch er sich über die gesamte Höhe des bodys (sprich: Viewports) ausdehnt. Die Angabe der relativen Position ist dabei notwendig.

HTML:

<html>
  <div id="wrapper">
    <header> ... </header>
    <content> ... </content>
    <footer> ... </footer>
  </div>
</html>

CSS:

html {
  height: 100%;
}
#wrapper {
  position: relative;
  min-height: 100%;
}

2. Content justieren

Jetzt muss dem Content ein unteres Padding mitgegeben werden, welches der Höhe des Footers entspricht.

CSS:

content {
  padding-bottom: 130px;
}

Das Ergebnis für kurze Seiten sieht dann so aus:

Footer klebt unten, lässt sich aber vom Content aus dem Viewport schieben.
Footer klebt unten, lässt sich aber vom Content aus dem Viewport schieben.

Als HTML hier zu sehen:

Footerbeispiel 3

Jetzt ist

  1. der Footer immer unten (bei „niedrigen“ Seiten bzgl. des Viewports „absolute bottom“-positioniert), lässt sich aber
  2. vom Content unten aus dem Bild schieben (verhält sich also relativ zum Content bei „hohen“ Seiten).

Wenn alles so einfach wär.

Anmerkungen

Ja, auch diese Lösung hat einen Nachteil: Die feste Höhe des Footers bzw. das dadurch bedingte fixe Padding des Contents macht eine variable Befüllung des Footers etwas kompliziert. Wenn im Footer z.B. eine WordPress Widget-Area zum Einsatz kommt, deren Inhalte (z.B. eine immer längere Liste von Schlagworten) größenvariabel sind, muss mit der min-height des Footers und dem padding-bottom des Content aufgepasst werden, dass die Inhalte nicht abgeschnitten werden.

Eventuell ist die Flexbox-Variante (Anwendungsbeispiel 1) ein verwertbarer Ansatz?

Schreibe einen Kommentar

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