Footer erstellen: Das solide Ende der Seite

vom 02.01.2014 von Oliver Misch

Der Footer ist der unaufgeregteste Teil einer Website und trotzdem einer mit festen Aufgaben: Er beherbergt die Pflichtlinks, sagt wem die Seite gehört und signalisiert "hier ist Schluss". Bauen wir einen ordentlichen.

Schritt 1: Struktur

HTML-Code

<footer>
    <nav aria-label="Fußzeilen-Links">
        <a href="impressum.html">Impressum</a> ·
        <a href="datenschutz.html">Datenschutz</a> ·
        <a href="kontakt.html">Kontakt</a>
    </nav>
    <p>&copy; 2026 Kim Beispiel. Handgetippt.</p>
</footer>

Das footer-Element macht die Rolle des Bereichs maschinenlesbar. Bei einer Handvoll Links reicht auch eine schlichte Zeile ohne nav, ab einem richtigen Linkblock ist die Auszeichnung aber sauber. Und falls deine Seite öffentlich in Deutschland läuft: Impressum und Datenschutzerklärung sind keine Deko sondern Pflicht, der Footer ist ihr angestammter Platzz.

Schritt 2: Gestalten

CSS

footer {
    margin-top: 48px;
    padding: 24px 16px;
    border-top: 3px solid #008080;
    background: #F4F4F4;
    font-size: 0.9em;
    color: #444;
    text-align: center;
}
footer a { color: #008080; }

Das Rezept: deutlicher Abstand nach oben, eine Trennlinie als Kante, gedeckte Farben und etwas kleinere Schrift. Der Footer darf zurücktreten, er ist Servicebereich, keine Bühnne.

Schritt 3: Der Klassiker: Footer bei wenig Inhalt

Bei kurzen Seiten schwebt der Footer sonst mitten im Fenster statt unten zu sitzen. Die moderne Lösung ist ein Flex-Trick am Grundgerüst:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;    /* main schluckt den freien Platz */
}

Der body wird mindestens fensterhoch, Flexbox stapelt die Bereiche senkrecht, und main dehnt sich aus bis der Footer unten anliegt. Drei Regeln, jahrzehntealtes Problem gelöst.

Was nicht in den Footer gehört

Wichtiger Inhalt. Wer zentrale Infos "unten noch reinquetscht", versteckt sie. Und die 90er-Sitte, den Footer mit Besucherzählern und Badges vollzuhängen, dokumentieren wir liebevoll im Retro-Web, praktizieren sie aber, äh, na gut, teilweise selbst. Als Stilmittel. Ausnahmsweisse.

Weiter im Fahrplan: Responsive Webseite · Verwandt: Semantisches HTML