Fester Header / Footer - Content scrollbar mit CSS
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.
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.
Die nachfolgenden Angaben sorgen für einen feststehenden Header mit integrierter Navigation, einen feststehenden Footer und einen scrollbaren Contentbereich.
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.