Falk Prüfer
Blog abonnieren
Wohin mit der Fusszeile - am besten an den unteren Bildschirmrand
Falk Prüfer
Suche
Kalender
|
Februar '12 | |||||
| Mo | Di | Mi | Do | Fr | Sa | So |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | ||||
Kategorien
Freitag, 27. März 2009
Wohin mit der Fusszeile - am besten an den unteren Bildschirmrand
Die neue Webseite ist fertig, schickes Design und klassische Aufteilung
(Überschrift oben, Hauptavigation links, Fusszeile unten)! Aber die Seiten mit wenig Text
sehen irgendwie Sch... aus, wenn die Fusszeile mitten auf dem Bildschirm klebt.
Wie bekommt man die an den unteren Bildschirmrand ohne umständlich mit JavaScript die absoluten Höhen ermitteln und jedesmal die Fusszeile neu positionieren zu müssen? Mit CSS und „vertical-align: bottom” und „height: 100%”?
Jeder der schon einmal mit CSS versucht hat einen Container mit 100% Höhe zu formatieren, wird wissen das dies nicht immer die erwarteten und erhofften Ergebnisse bringt. Und besagtes „vertical-align” tut es auch nur bei einer absoluten Höhenangabe des umgebenden Elementes. Aber wer will sich in der Höhe schon festlegen?
Wie bekommt man nun aber die Fusszeile mit CSS an den unteren Bildschrimrand?
Mit „vertical-align: bottom” nicht! Dafür benötigt man die absolute Höhe in Pixeln des zur Verfügung stehenden Bereiches und der ist von zu vielen Faktoren abhängig, als das man den mit Pi mal Daumen angeben könnte und JavaScript scheidet erstmal aus.
Vielleicht bringt uns 100% Höhe ja doch weiter!?
Dazu muss man sich zunächst einmal klar machen, was 100% Höhe im Sinne von CSS sind, bzw. was sie nicht sind. 100% Höhe bedeutet immer: „genau so hoch wie das Elternelement”. 100% Höhe bedeutet dagegen so gut wie nie: „genau so hoch wie der verfügbare Platz” - einzige Ausnahme: der verfügbare Platz entspricht exakt der Höhe des Elternelements.
Das folgende Beispiel soll dies verdeutlichen.
<div style="border: 3px solid blue; height: 40px;">
<div style="border: 3px solid red; height: 100%;"></div>
</div>
Der innere rote Rahmen ist exakt so hoch wie das Elternelement. Da er aber einen 3 Pixel starken Rahmen hat, ragt er um genau diese 3 Pixel aus dem blauen Rahmen heraus.
[Anm.:]Die Benutzer eines Internet Explorer bis einschließlich Version 6 oder Opera bis zur Version 7 werden diese Aussage jedoch nicht bestätigen können, da diese Browser eine etwas andere Auffassung der Zugehörigkeit von Rahmendicken zu Höhen und Breiten haben.
Nachfolgend wird es noch etwas deutlicher.
<div style="border: 3px solid blue; height: 100px;">
<h4>Kleine Zwischenüberschrift gefällig?</h4>
<div style="border: 3px solid red; height: 100%;"></div>
</div>
Kleine Zwischenüberschrift gefällig?
Der innere rote Rahmen ragt jetzt zusätzlich um die Höhe der Überschrift
aus seinem Elternelement heraus. Ist das die erwartete 100% Höhe?
Einige Browser haben auch hier wieder eine andere Auffassung und machen den roten
Rahmen so hoch wie der Blaue sein müsste und vergrößern den Blauen bis um den Roten herum.
Ist das 100% Höhe?
Zumindest wissen wir jetzt, dass man bei der Verwendung von 100% Höhe solch schmückendes
Beiwerk wie Rahmen besser weglassen sollte. 
Um unsere Fusszeile an den unteren Rand zu bekommen, könnte man also einen Container mit 100% Höhe darüber setzen und müßte nur die Fusszeile um die eigene Höhe nach oben verschieben. Das klingt machbar.
<div style="border: 3px solid blue; height: 150px;">
<div style="height:100%; background-color: #D5FFB4; margin-bottom: -2em">
<h4 style="margin-top: 0;">Kleine Zwischenüberschrift gefällig?</h4>
<p>Text</p>
</div>
<div style="height:2em; background-color: #B4C7FF;">Fusszeile</div>
</div>
Kleine Zwischenüberschrift gefällig?
Text
Das sieht ja soweit schon ganz gut aus, aber was passiert wenn der Text länger wird?
Kleine Zwischenüberschrift gefällig?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Tja, das wars dann mit der Vorfreude. Der längere Text verschiebt nicht etwa die Fusszeile nach unten und scrollt dann gemeinsam mit dieser durch den blauen Container, nein der Text „fließt” erst einmal durch die Fusszeile durch und scrollt dann.
Und nun? Latein am Ende? Noch nicht ganz! Der Inhaltscontainer darf also keine 100% Höhe
haben, um seine „Verschiebewirkung” auf die Fusszeile nicht zu verlieren.
Wir brauchen einen zweiten Container - einen „Platzhalter”, der 100% Höhe und keine Funktion hat. Dies ist aus semantischer Sicht nicht unbedingt schön, aber manchmal muß man eben Kompromisse machen.
<div style="border: 3px solid blue; height: 150px; overflow: scroll">
<div style="height:100%; float: left; width: 2px; background-color: red; margin-bottom: -2em;"></div>
<div style="background-color: #D5FFB4; padding-bottom: 1em;">
<h4 style="margin-top: 0;">Kleine Zwischenüberschrift gefällig?</h4>
<p>Text</p>
</div>
<div style="clear: left; height: 2em; background-color: #B4C7FF;">Fusszeile</div>
</div>
Kleine Zwischenüberschrift gefällig?
Text
Und mit langem Text?
Kleine Zwischenüberschrift gefällig?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Die Fußzeile wird jetzt wie erwartet nach unten Verschoben und alles Zusammen kann im Elterncontainer gescrollt werden. Sieht so aus als wäre damit eine Lösung gefunden!
Auf eine komplette Seite angewendet, ist nur noch dafür zu sorgen, dass für
den „Platzhalter” die 100% Höhe auch tatsächlich die Höhe der Seite sind.
Dazu müssen lediglich sein Elternelement, der <body> und wiederum dessen Elternelement <html> ebenfalls mit 100% Höhe versehen werden.
Zum Abschluß benötigen wir eigentlich nur noch für unseren „Platzhalter” eine semantisch sinnvolle Verwendung auf unserer Seite. Dafür bietet sich z.B. eine linke oder rechte Hauptnavigation an.
Beispiel für eine Seite mit Fusszeile am unteren Bildschirmrand
