ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Sticky Fußzeile mit CSS und HTML für Ihre Website!

Sticky Footer mit CSS und HTML programmieren - Fußzeile

MagicDie CSS-Welt entfaltet sich jeden Tag weiter durch neue Herausforderungen, die mit den entsprechenden neuen schlauen Tricks zu überwinden sind.

In diesem Artikel möchten wir mehr Licht auf die sogenannten "Sticky Footer" werfen. Dieses Problem gehört inzwischen zum Alltag des Webentwicklers, mit den dazu gehörigen Responsive-Details, die zu berücksichtigen sind.

Wir zeigen Ihnen, wie Sie eine Sticky Fußzeile bzw. einen Sticky Footer mit CSS und HTML programmieren können.

Eine Webpage auf Ihrer Webseite, die ganz schön ausreichend Inhalt hat, wird eine ausgedehnte Höhe haben und das Fußzeilen-Problem ist von keinem zu bemerken.
Doch was passiert, wenn Sie zu wenig Inhalt auf eine Page legen? Dann hängt Ihr Footer einfach so im "Nichts" mit ganz viel "Luft" bzw. leeren Raum dazwischen, was dem Auge und damit Ihren Usern nicht so richtig gefällt. Um dieses Problem zu lösen, indem man die Fußzeile nach ganz unten schiebt, wohin sie üblicherweise auch gehört, kann man einige flexible Methoden anwenden. Wir werden hier zwei flexible und responsive Tricks unter die Lupe nehmen.

1. Sticky Footer mit der "display: table" Methode

Dieser Trick ist sehr nützlich, weil man damit die übliche Responsive-Darstellung der Seite nicht zerstört, wobei man nur CSS braucht, was echt einfach und elegant ist.

Der Source-Code für das Verfahren sieht folgendermaßen aus:

HTML

<header>
  <h1>Seitentitel</h1>
</header>
<content class="seite-reihe seite-reihe-ausgedehnt">
  <p>Ihr Inhalt</p>
</content>
<footer class="seite-reihe">
  <p>Der Inhalt Ihrer Fußzeile kommt hier.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.seite-reihe {
  display: table-row;
  height: 1px;
}

.seite-reihe-ausgedehnt { height: 100%; }

2. Sticky Footer mit der Flex-Box Methode

Diese Methode ist relativ neu und ist nicht durch die älteren Browsers unterstützt, doch sie hat ihre guten Vorteile. Das Problem mit der geklebten Fußzeile bzw. dem Sticky Footer ist eines, das zum Teil schon als gelöst gilt. Doch alle diese Lösungen haben einen wesentlichen Nachteil: Sie wirken nicht für eine Fußzeile mit unbekannter Höhe.

Flexbox ist perfekt geeignet für Situationen dieser Art. Während diese CSS Eigenschaft hauptsächlich für das Anlegen von waagerechtem Inhalt bekannt ist, wirkt eigentlich Flexbox genauso gut für senkrechte Layout-Probleme. Sie brauchen nur die vertikalen Abteilungen in einem Flex Behälter einzuwickeln und diejenige wählen, welche Sie ausdehnen möchten. Sie werden automatisch den Raum in ihrem Behälter besetzen.

In dem unteren Beispiel ist der Behälter zu der Höhe des Fensters gesetzt und der Inhaltbereich wird so weit wie möglich ausgedehnt. Im Unterschied zu dem Fall mit der horizontalen Richtung, wo das passende Ausdehnen automatsich passiert, muss man bei der vertikalen Richtung eine bestimmte Höhe für den Behälter setzen.

Der Code dafür würde dann so aussehen:

HTML

<body class="Seite">
  <header>…
  <content class="Seiteninhalt">…
  <footer>…
</body>

CSS

.Seite {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Seiteninhalt {
  flex: 1;
}

Die Schlussfolgerung, die wir von dieser Lösung ziehen können ist, dass es manchmal die Kleinigkeiten sind, die den Tag retten. In einem unserer nächsten Artikel werden wir Ihnen über weitere nützliche Sticky Footer Tricks und auch generell mehr über die Anwendungen des Flex-Box Konzepts in der modernen Webentwicklung erzählen.

Bis dahin, viel Erfolg beim programmieren!

Sie benötigen Hilfe bei der Programmierung Ihrer Website? Unser Team aus professionellen Programmierern und Webdesignern unterstützt Sie gerne bei Ihrem Vorhaben!

Rufen Sie uns an: +49 21 61 - 17 77 74

û