CSS/Anwendung und Praxis/feststehender footer

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Wort Footer (engl. foot = Fuß) bezeichnet eine Fußzeile, wie sie auch die SELFHTML-Seiten aufweisen.

Es stellt sich die Frage, welche Gründe dafür sprechen, Webseiten mit einem Footer zu versehen. Dies sind beispielsweise:

  • Ein Footer schließt eine Seite sowohl optisch als auch inhaltlich ab. Insbesondere, wenn Elemente vorhanden sind, die sich vertikal über die gesamte Seite erstrecken, ist ein optischer Abschluss interessant.
  • Bei fehlendem Footer kann der Eindruck entstehen, die Seite ginge nach unten noch weiter, so dass der Besucher vergeblich weiterscrollt und erst nach einem zweiten Blick auf den Scrollbalken feststellt, dass er sich bereits am Seitenende befindet.
  • Darüber hinaus sind Footer geeignet, Elemente unterzubringen, die sich auf jeder Seite befinden sollen (z.B. ein Urheberrechtshinweis) oder unter Umständen sogar müssen (z.B. ein Link zum Impressum).

Inhaltsverzeichnis

[Bearbeiten] Einfacher Footer

Fußzeilen werden durch das footer-Element semantisch ausgezeichnet.

Als Grundstruktur verwenden wir unsere Webseite mit einem einfachen Footer aus dem HTML5-Tutorial in der letzten Version eines CSS/Anwendung und Praxis/mehrspaltigen Layouts:

Beispiel: Seite mit 3 Spalten ansehen …
<body>
  <header>
    <!-- Kopfzeile -->
  </header>
 
  <article>
     <!-- Inhalt -->
  </article>
 
  <aside>
    <!-- weiterführende Informationen -->
  </aside>
 
  <footer>
    <!-- Fußzeile -->
  </footer>
</body>

[Bearbeiten] Feststehender Footer

Eine erweiterte Form des vorhergehenden Beispiels ist ein Footer, der mit der CSS-Eigenschaft position mit dem Wert fixed am unteren Bildrand feststeht und damit immer zu sehen ist, unabhängig davon, wie die Seite gescrollt wird.


Beispiel: Seite mit feststehendem footer ansehen …
body {
  padding-bottom:3em;
}
 
footer {
  position: fixed;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}

Mittels position: fixed wird das footer-Element als feststehendes Element definiert, mittels bottom: 0; wird es 0 Pixel von der Unterkante des Darstellungsbereiches entfernt, also ganz unten, positioniert.

Beachten Sie, dass Sie für den body-Bereich noch einen unteren Innen- oder Außenabstand definieren, da sonst die Fußzeile den unteren Bereich des Elements überdeckt!

Unschön an diesem Beispiel ist, dass der Kontakt-Link und das Copyright bei großen Viewports außerhalb des eigentlichen Satzspiegels ist. Dies wird im nächsten Beispiel gelöst

[Bearbeiten] Feststehende Kopf- und Fußzeile

Wenn Sie nun vielleicht noch gerne eine feste Kopfzeile definieren möchten, damit die Seite sowohl nach oben als auch nach unten hin stetig „abgeschlossen“ ist, lässt sich das auf die gleiche Art und Weise realisieren wie der Footer. Um bei der obigen HTML-Struktur zu bleiben, muss man das header-Element lediglich aus dem body herausnehmen und davor setzen. Folgende CSS-Deklarationen werden ferner benötigt:

Beispiel: Seite mit header und footer ansehen …
body {
  padding: 7em 0 3em;
}
 
body,
.wrapper {
  margin: 10px auto;
  max-width: 60em;	
}
 
header {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;
}
 
footer {
  position: fixed;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}
  <header>
    <div class="wrapper">
      <img src="Logo.svg" alt="logo">
      <h1>Titel</h1>
    </div>
  </header>

Die Funktionsweise ist beinahe identisch mit dem vorhergegangen Beispiel – lediglich der Body bekommt einen der Höhe des Header angepassten Innenabstand.

Damit die Inhalte von Header und Footer zentriert werden, wird hier noch ein zusätzliches div mit der gleichen Breite und Zentrierung wie der Body eingefügt.

[Bearbeiten] Alternative Positionierung mit fester Navigation

Bisher wurden die Elemente übereinander angeordnet, so dass lediglich in der Mitte ein Element gescrollt wurde. Nun ist die Navigation ebenfalls feststehend positioniert.

Beispiel: Seite mit header und footer ansehen …
nav {
  position: fixed;
  padding-top: 10em;	
}

Ein padding-top: 10em platziert sie unter dem feststehenden header.

[Bearbeiten] Wie geht es weiter?

Eine modernere Möglichkeit, die leider noch nicht in allen Browser unterstützt wird, ist ein sich anfangs mitscrollender, dann aber angeklebter sticky footer mit position:sticky.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML