Foot-Sticker-Alt ist eine Technik, mit der man den Fußbereich einer Webseite am unteren Bildschirmrand fixieren kann, auch wenn die Seite wenig Text enthält.
Hier findest du die footstickeralt_anfang.htm, zum Quelltext rauskopieren.
Im Browser schaut es so aus:
Die Quelltextstruktur ist folgendermaßen:
<div id="umhang"><div id="umhang_innen"><div id="kopf"><h1>Überschrift Kopfbereich</h1></div><div id="textbereich"><p>Ein sehr kurzer Text</p></div></div> <-- Ende div#umhang_innen --><div id="fuss"><p>Der Fussbereich soll immer ganz unten auf der Seite sein</p></div></div> <-- Ende div#umhang -->
Wir haben ein Element was alles umschließt
#umhang
und eines welches #kopf und #textbereich umschließt:
#umhang_innen.
#fuss ist zwischen dem Ende von #umhang_innen und #umhang in den Quelltext geschrieben worden.
Theoretisch könnte man auch auf #umhang verzichten. Dieses alles umschließende Element wird jedoch oft benötigt, um eine Webseite horizontal zu zentrieren.
#umhang_innen benötigt eine Mindesthöhe von 100%.
Mit height:100%; wird die Höhe der Box auf die Höhe des sichtbaren Bereiches (Viewport) beschränkt, auch dann wenn die Menge des Inhaltes mehr Platz erfordert. Nur die Deklaration von min-height:100%; lässt die Box mitwachsen.
CSS ergänzen:
#umhang_innen { min-height:100%; }
Wie wir sehen, sehn wir nichts. 
Warum eigentlich nicht??
Bei einer Prozentangabe ist immer die Frage: Prozent von was?
In diesem Fall bezieht es sich auf die Höhe des Elternelementes, d.h. #umhang. Für #umhang ist keine Höhe definiert, also kann 100% nicht errechnet werden und fällt auf height:auto; zurück. Das Element wird nur so hoch wie sein Inhalt.
#umhang hat aber auch noch ein Elternelement: <body> und das
wiederrum hat auch noch einen Vorfahren: <html>.
Erst dann ist Schluß.
Da <html> kein Elternelement mehr hat, bezieht sich die Prozentangabe für <html> auf den sogenannten Initial Containing Block, das ist ein Rechteck in der Größe des sichtbaren Bereiches (Viewport).
CSS ergänzen:
html, body { height:100%; }#umhang { height:100%; }
Jetzt sieht es so aus:
Naja, da fehlt aber jetzt was!
Okay, da #umhang_innen die Deklaration min-height:100%; bekommen hat und #fuss im Quelltext außerhalb von #umhang_innen liegt, ist ja auch logisch das #fuss jetzt unterhalb des sichtbaren Bereiches liegt.
Für #fuss haben wir eine Höhe von 50px definiert. Mit einem entsprechenden negativen margin-top für #fuss hieven wir denselben wieder nach oben in den sichtbaren Bereich.
CSS ergänzen:
#fuss { margin-top:-50px; }
Das Ergebnis sieht jetzt so aus:
Ganz ordentlich.
Leider ist das Ergebnis im IE 6 nicht ganz so ordentlich, weil er mit min-height nix anfangen kann.
Da er jedoch height wie min-height behandelt können wir ihm mit einer Deklaration in den Conditional Comments auf die Sprünge helfen.
Conditional Comment ergänzen:
<!--[if lte IE 8]><style type="text/css">* html #umhang_innen { height:100%; }</style><![endif]-->
Jetzt ist auch der IE 6 glücklich!
Pingback: Erstellen eines Layouts; 3 Spalten; Zentriert; 100% H
Pingback: Anonymous
Pingback: Problem mit {height:100%} - XHTMLforum
Pingback: Footer-Positionierung am Beispiel von "TheManInBlue" - XHTMLforum
Pingback: Ausrichtung von Boxen als float: left - warum? - XHTMLforum
Pingback: Faux Columns Liquid
Pingback: aus Seite rauslaufender Balken - XHTMLforum
Pingback: Ein paar Fragen - XHTMLforum
Pingback: mein wrapper und die h
Pingback: Anonymous
Pingback: Das CMS Contao - Vor- und Nachteile - Seite 2 - XHTMLforum
Vielen lieben Dank, war sehr hilfreich für mich.
Pingback: Content mit DIV passt sich nicht dem Inhalt an - Seite 2 - XHTMLforum