Hallo
Zitat:
Hier mal, was ich bis jetzt habe.
|
Ich habe aus deinem Quelltext mal eine aktuelle responsive Webseite mit einem Sticky Footer erstellt. Die Höhe von header und footer passen sich ihrem jeweiligen Inhalt an. Höhenangaben (height) sind deshalb für beide nicht notwendig und stören sogar.
Zunächst deine Datei:
Quelltext Elma
Ich habe mir eine Vorlage erstellt, die für über 90% aller Layouts verwendet werden kann. Es handelt sich um ein sogenanntes Holy Grail Layout, dem ich etwas Inhalt hinzugefügt habe:
Vorlage Holy Grail Layout
Dann erfolgen die Anpassungen an das durch deinen Quelltext erkennbare Layout:
Seite mit Elmas Layout
Zum Schluß wird noch ein Fallback für ältere IE ab dem IE7 hinzugefügt. In allen anderen Browsern, auch dem IE11, sind natürlich keine Änderungen sichtbar. Um das Fallback anzuschauen muss die Seite also in einem älteren IE aufgerufen werden.
Achtung: Der Dokumentmodus im IE11 und neueren verhält sich teilweise anders als originale IE 7, 8 und 9. Der Dokumentenmodus ist nur eine Emulation. Um das Fallback korrekt zu testen muss die Website deshalb in originalen älteren IE aufgerufen werden:
Seite mit Elmas Layout und IE Fallback
Noch ein Beispiel mit etwas mehr Text in header und footer ohne Änderungen im CSS um zu zeigen, wie sie sich ihrem Inhalt flexibel anpassen und nur so viel Platz beanspruchen, wie sie auch benötigen:
Mehr Text in header und footer
Zum Schluß noch ein eher praxisorientiertes Beispiel mit mehr Inhalt und gefloateten Grafiken, die durch ein Clearfix eingefangen werden, wie float aktuell sinnvoll in seiner ursprünglichen Aufgabe verwendet werden kann:
Mehr Inhalt mit Bildern, float und clearfix
Gruss
MrMurphy