Auge: Footer fast immer am unteren Browser-Rand

Beitrag lesen

Hallo


Header (height:90px)
Content (height:*)

Footer (height:40px)

Jeder Bereich (Header, Content, Footer) ist jeweils ein DIV-Element.
Das Ziel ist es, wenn der Inhalt nicht das Browser-Ende erreicht, soll der restliche Platz mit der Hintergrundfarbe gefüllt werden bis der Footer mit dem Browser endet.

Der Footer endet mit dem Browser? Liest sich ja gut. :-)

Einfach mit einer Höhenangabe für den Content ist es leider nicht getan, da du nicht weißt, wie groß/hoch der Anzeigebereich des Browsers des Besuchers (Viewport) ist. Du kannst diese per JavaScript ermitteln und die Höhe -Header -Footer errechnen und #Content zuweisen lassen. funktioniert natürlich nicht, falls kein JavaScript zur Verfügung steht.

Du kannst auch die Hintergrundfarbe an <body> vergeben und den Footer per position:fixed; am unteren Browserrand festnageln. er wird dann immer dort angezeigt, egal wie viel Content in Content steht. Funktioniert widerum nicht im MSIE <= 6.

Geht nun der Inhalt über das Browser-Fenster hinaus soll auch der Footer mitwandern und erst beim Runterscrollen zu sehen sein.

Dann wäre es am besten, Content eine min-height:...; zu geben. Für den MSIE <= 6 musst du aber height:...; einfügen und vor moderneren Browsern verstecken. Dazu kann man z.B. Conditional Comments verwenden.

Damit kann man eine Mindesthöhe erzwingen. Ob diese nun genau dem entspricht, was du willst, weißt selbst du nicht. Du kannst keine konkrete Aussage zum Viewport beim Besucher machen. In Kombination mit der dynamischen Anpassung der Höhe per JavaScript kannst du aber die meisten Besucher mit graphischem Browser erreichen. Wenn dann noch wer etwas scrollen muss, um den Inhalt des Footers zu erreichen, seis drum. Daran wird niemand sterben.

Tschö, Auge

--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1