Sie befinden sich hier:
» 
» 
23.03.2014

Fester Header / Footer - Content scrollbar mit CSS

Kategorie(n): HTML und CSS Tipps

Manchmal sind es Kleinigkeiten, an denen Sie mehr Zeit verbringen, als Sie eigentlich eingeplant haben. Solch eine Kleinigkeit ist es, Header und Footer auf einer Webseite zu fixieren und nur den Contentbereich zu scrollen. Dies hat mich dazu bewogen, hier ein kleines Beispiel zur Verfügung zu stellen.

Das Beispiel ist mit HTML5 realisiert und unterstützt ältere Browser bis einschließlich IE6. Die HTML5-Unterstützung ist auch der Grund, weshalb ich schreibe „browserunabhängig mit CSS“ und nicht „browserunabhängig mit purem CSS“. Die Realisierung der Abwärtskompatibilität erfolgte mit Javascript. Falls Sie diese Art des Fallbacks nicht mögen, können Sie es aber auch mit HTML4 realisieren, d.h. mit <div> anstelle von <header>, <footer> etc. Wichtig ist, dass Sie einen validen DOCTYPE wählen, damit die Webseiten im Standard-Mode und nicht im Quircks-Mode laufen.

Header / Footer fest – Rollbalken nur im Contentbereich

Die folgenden CSS-Angaben sind für ein browserübergreifendes Grundgerüst notwendig. Als Höhe wird die gesamte Browserhöhe definiert und das Overflow-Verhalten wird auf hidden gesetzt. Somit wird für übergroße Inhalte am Browser kein Rollbalken gezeigt.

html, body {
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

Die Definition der HTML5-Elemente als Blockelement ist notwendig, um ältere Browser, die erst HTML5-tauglich gemacht werden müssen, in eine definierte Ausgangslage zu versetzen. Wie ältere Browser HTML5-tauglich gemacht werden, habe ich bereits in diesem Blog beschrieben, darauf möchte ich an dieser Stelle nicht explizit eingehen.

header, nav, section, footer {display: block;}

Die nachfolgenden Angaben sorgen für einen feststehenden Header mit integrierter Navigation, einen feststehenden Footer und einen scrollbaren Contentbereich.

header {
  top:0px;
  position:fixed !important;
  position:absolute;
  height:15%;
  width:100%;
}
nav {
  bottom:0px;
  height:30%;
  left:0px;
  position:absolute;
  width:100%;
}
#Content {
  top:15%;
  height:80%;
  position:relative;
  overflow:auto;
  width:100%;
}
footer {
  bottom:0px;
  position:absolute;
  height:5%;
  width:100%;
}

Wesentliche CSS-Angaben für Header / Footer im Detail

  • header
    • top:0px; - Ausgangspunkt des Headers ist der obere Rand des Browsers
    • position:fixed !important; - sorgt für eine feste Positionierung des Headers
    • position:absolute; - feste Positionierung für ältere Browser, die position:fixed noch nicht verstehen
  • nav
    • bottom:0px; - die Navigation liegt innerhalb des Headers an der unteren Kante
    • position:absolute; - die Positionierung an der Unterkante des Headers erfolgt absolut
  • #Content
    • top:15%; - der Content beginnt um die Höhe des Headers versetzt nach unten
    • height:80%; - die Gesamthöhe des Contentbereiches ergibt sich aus 100% minus Höhe Header minus Höhe Footer
    • position:relative; - die Positionierung erfolgt relativ zum vorherigen Element (dem Header)
    • overflow:auto; - das am Body definierte overflow:hidden, wird hier auf auto zurückgesetzt, damit der Rollbalken nur am Contentbereich erscheint
  • footer
    • bottom:0px; - der Footer wird am unteren Rand des Browsers positioniert
    • position:absolute; - die Positionierung an der Unterkante des Browserfensters erfolgt absolut

Fester Header / Footer mit CSS in der Praxis

Das Beispiel funktioniert browserunabhängig und ist durch die prozentualen Höhenangaben flexibel einsetzbar. Entgegen meiner üblichen Vorgehensweise habe ich die Stylesheets inline definiert, damit Sie bei Bedarf die notwendigen Angaben direkt aus dem Quellcode entnehmen können.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

76