SelfHTML: "Footer aller Art - feststehende Elemente realisieren"

[Dennis]

Hi Björn,

Vorab - deine E-Mail habe ich soeben erhalten, da der Inhalt aber deinem Posting hier entspricht, schreibe ich die Antwort hier, für andere leserlich - ich hoffe, das ist dir Recht.

ich habe gerade den Artikel auf SelfHTML "Footer aller Art - feststehende Elemente realisieren" von Dennis Riehle (http://aktuell.de.selfhtml.org/tippstricks/css/footer/) gelesen und ein wenig damit rumgespielt. Zwei Probleme habe ich dabei entdeckt:

Ich möchte an dieser Stelle noch einmal erwähnen, dass dieser Tipps&Trick Artikel im Prinzip nur eine Spielerei, maximal ein Workaround für position:fixed im IE ist - wirklich sauber kriegt man es nur mit position:fixed hin.

1. IE-Problem Scrollbar:
   Möchte man nicht auf 100% Breite gehen, sondern wählt eine Breite von bspw. 800px, so verschwindet die Scrollbar (auch mit dem 16px padding-right Trick) unter dem Header und Footer. Ich habe dafür bis jetzt noch keine Lösung gefunden.

Wie es aussieht ist dieses Problem bereits gelöst - ist aber eigentlich auch logisch, wenn du sowohl Kopf- und Fußzeile als auch den Content-Bereich auf 800px Breite setzt, dann ist der Scrollbalken des Content-Bereiches natürlich unter Kopf- und Fußzeile. Ein padding-right würde in normalen Browsern helfen, weil:

Tatsächliche Breite = border-left + padding-left + width + padding-right + border-right

Gemäß dem oben notierten Box Modell würde also der Content-Bereich bei padding-right:16px mit 816px Breite dargestellt werden, leder setzt der IE im Quirks Mode das so um:

Tatsächliche Breite = width

Deshalb muss man für den IE die Breite 816px angeben für den Content-Bereich und 800px für Kopf- und Fußzeile.

2. Firefox-Problem Höhe des Content-Bereiches:
   Das div mit der id content hat im IE eine Höhe von tatsächlich 100% und geht somit bis runter zum Footer. Dies ist im Firefox/ Mozilla nicht gewährleistet. Dort ist das Content-Div nur so hoch wie der Content an sich plus deine 30px padding-bottom. Das ist dann ein Problem, wenn man bspw. sein Layout nur 800px breit macht (s.o.), für den body einen Hintergrund nimmt (z.B. horizontale Streifen) und wählt für den content-Div den Background #fff. Auch dieses Problem habe ich noch nicht lösen können.

Grundsätzlich sollte sich dieses Problem mit min-height lösen lassen können - spontan sehe ich da allerdings ein Problem mit dem padding-bottom - wenn du min-height:100% nehmen würdest, kämen die 30px von padding-bottom noch dazu, so dass du eventuell Scrollbalken hast, die gar nicht benötigt werden.

Da müsstest du wohl einfach mal noch ein bisschen rumprobieren - eine Lösungsmöglichkeit wäre die Höhen für Kopf- und Fußzeile und damit auch padding-bottom für content in Prozent anzugeben.

MfG, Dennis.