Barrierefrei, Standard konform und trotzdem die Vorzüge einiger Tabellenlayouts nutzen. Eines dieser Probleme ist ein Layout bei dem ein Footer-Balken immer am Fuss der Seite verweilt, egal in welcher Auflösung die Seite im Browser dargestellt wird.
Leider bietet CSS nur bedingt Möglichkeiten. Height: 100% gibt es zwar, wird aber nur bedingt interpretiert. Um diesen “Sticky Footer” erzeugen zu können, gibt es mitlerweile eine ganze Reihe guter Beispiele:
Ryan Fait hat ein Beispiel aufgesetzt das nur dann Funktioniert, wenn der Inhalt selbst innerhalb eines DIV-Layers liegt, welcher auf 100% Höhe gestreckt wird.
Der Footer-DIV-Layer ist außerhalb der Inhalts-Layers angeordnet.
Gefüllt wird die Seite durch einen Trick. Ein Layer mit der Bezeichnung “Push” füllt nun künstlich den Raum zwischen Inhalts-Layer, Footer-Layer und Seitenboden auf. Bitte beachten, das dies Anhand des Beispiels nur bei Document-Type Strict geht.
http://www.themaninblue.com/experiment/footerStickAlt/
Hier ist eine robustere (damit wird geworben) Variante. Sie verwendet auch einen Container und eine Wrapper Klasse bei der im CSS die Höhe auf 100% gelegt wird und die HTML Streckung ebenfalls auf 100% liegt. Trotzdem habe auch ich Kombinationen gefunden bei denen diese Variante nicht funktioniert. In diesem Fall hatte ich mehrere Spalten mit float eingesetzt und damit die Höhendarstellung unterbrochen.
http://www.coldheat.de/archiv/2006/08/tricky-sticky-footer.php
Dieses Beispiel bezieht sich hauptsächlich auf eine Vollseitendarstellung besonders in der Breite. Hier ist es problematisch den Footer im sichtbaren Bereich am Boden zu halten, ohne das der IE oder Safari den Footer unterhalb des Fensters verschiebt.
Es lohnt sich aber mit den Beispielen zu experimentieren. Am Ende könnte man ja immer noch auf ein Javascript zurückgreifen, dass die Höhe der Fenstergröße anpasst.
Einen Kommentar schreiben