Fester Header / Footer - Webseite scrollbar mit CSS
Nachdem ich bereits eine Varante vorgestellt habe, bei der Header und Footer fest stehen und sich nur am Contentbereich ein Rollbalken befindet, möchte ich hier noch eine Variante vorstellen, bei der sich der Rollbalken über das gesamte Browserfenster erstreckt.
Das Beispiel ist mit HTML5 realisiert und unterstützt ältere Browser bis einschließlich IE6. Allerdings waren für den IE6 Javascript-Expressions notwendig, wodurch man sich in eine gewisse Javascript-Abängigkeit begibt. Sicherlich sei die Frage nach der Notwendigkeit der Unterstützung des Uralt-Browsers IE6 erlaubt. Ich sehe es mehr als Herausforderung, ihn weiterhin zu unterstützen. Wer das folgende Bespiel ohne diese Abhängigkeiten verwenden möchte, kann einfach die IE6-Hacks weg lassen. Dies gilt ebenfalls für den HTML5-Fallback. Die Webseite kann ebenso mit HTML4 realisiert werden, 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 über die gesamte Webseite
Die folgenden CSS-Angaben sind für ein browserübergreifendes Grundgerüst notwendig. Als Höhe wird die gesamte Browserhöhe definiert, am Overflow-Verhalten wird nichts geändert. Somit steht das Overflow-Verhalten auf auto und der Rollbalken wird am gesamten Browserfenster gezeigt.
height:100%;
margin:0;
padding:0;
}
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 und einen feststehenden Footer. Der Content wird im gesamten Browserfenster gescrollt.
top:0px;
position:fixed !important;
position:absolute;
height:10em;
width:100%;
z-index:10;
}
* html header {
top:expression(documentElement.scrollTop+'px');
}
nav {
bottom:0px;
height:30%;
left:0px;
position:absolute;
width:100%;
}
#Content {
top:10em;
height:80%;
position:relative;
width:100%;
padding-bottom:3em;
}
footer {
bottom:0px;
position:fixed !important;
position:absolute;
height:3em;
width:100%;
}
* html footer {
top:expression(documentElement.clientHeight+documentElement.scrollTop-48+'px');
}
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
- height:10em; - die Höhe wird in em definiert und nicht als Prozentwert, da sonst die dynamische Berechnung der Position für den IE6 nicht funktioniert.
- z-index:10; - ein z-index > 1 sorgt dafür, dass der Bereich beim scrollen nicht vom nachfolgenden Content überdeckt wird
- * html header, * html footer
- Hacks, speziell für den IE6. Hier wird mit Javascript-Expressions gearbeitet, um die Position des Headers und Footers jeweils aktuell zu ermitteln.
- 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:10em; - der Content beginnt um die Höhe des Headers versetzt nach unten
- position:relative; - die Positionierung erfolgt relativ zum vorherigen Element (dem Header)
- padding-bottom:3em; - sorgt, bei einem 3em hohen Footer dafür, dass auch die letzte Zeile des Contentbereiches noch sichtbar ist
- footer
- bottom:0px; - der Footer wird am unteren Rand des Browsers positioniert
- position:fixed !important; - sorgt für eine feste Positionierung des Footers
- position:absolute; - die Positionierung an der Unterkante des Browserfensters erfolgt absolut
Fester Header / Footer mit CSS in der Praxis
- So sieht der feste Header / Footer mit einem Rollbalken über die gesamte Webseite in der Praxis aus.
Das Beispiel funktioniert browserunabhängig und ist durch die relativen Höhenangaben (em) flexibel einsetzbar. Prozentuale Höhenangaben waren auf Grund der Abwärtskompatibiltät an dieser Stelle nicht zielführend. Entgegen meiner üblichen Vorgehensweise habe ich die Stylesheets inline definiert, damit Sie bei Bedarf die notwendigen Angaben direkt aus dem Quellcode entnehmen können.