- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Foot Sticker Alt
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!
- Kategorien:
- XHTML/CSS
- Tags:
- CSS, Foot Sticker Alt, Mindesthöhe
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] [...]
[...] Damit das auch klappt brauchen body und html eine Höhe von 100%. Warum habe ich in diesem Artikel ausführlich [...]
[...] [...]
[...] [...]
[...] [...]
[...] Foot Sticker Alt als Tutorial hilft dir vielleicht. Ansonsten immer mal bei Little Boxes vorbeischauen. __________________ [...]