Nabend zusammen,

ist es Möglich einen Footer also div-container immer ganz unten auf der Seite festzubinden heißt wenn die Seite nicht so viel Inhalt hat wie der Bildschirm groß ist ist es mit etwas Abstand ganz unten an der Taskleiste, wenn aber mehr Inhalt da ist rutscht er weiter nach unten so das er trotzdem ganz unten ist wie auf der Grafik.

Hoffe das ist einigermaßen zu verstehen.
Stehe voll aufm Schlauch.

LG Daniel

Ja, ist möglich. Das Suchwort dazu heißt "FooterStickAlt".

Dabei benutzt du ein Basislayout, wie es z.B. Maik in diesem Tutorial vorgestellt hat. Den Footer legt man unter den wrapper-Block (mit 100% minimaler Höhe), so dass er zunächst außerhalb des sichtbaren Bereiches positioniert wird. Anschließend kann man ihn mit einem negativen margin-top-Wert in den sichtbaren Bereich zurückschieben und den wrapper-Block damit überdecken.

Ein schönes Beispiel mit Erklärung zur Vorgehensweise wird hier von Corina Rudel gegeben.
Hier noch die Beispiele von TheManInBlue:

• mit wenig Inhalt
• mit viel Inhalt

P.S.
Eine Einschränkung gibt es natürlich: Du musst genau wissen, wie hoch dein Footer ist.

Hi,

und wenn die Höhe des Footers nicht bekannt ist, um ihn mit dem entsprechenden negativen margin-top-Wert nach oben zu schieben, positionierst du ihn eben am unteren Elementrand des wrapper-DIVs:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

* { margin:0; padding:0; }   html,body { height:100%; }   #wrapper { position:relative; min-height:100%; height:auto !important; height:100%; }   #footer { position:absolute; bottom:0; width:100%; }

Code :

1 2 3 4

<div id="wrapper">     <!-- Seiteninhalt -->     <div id="footer">footer</div> </div>

Diese Technik habe ich auch in meinem erwähnten CSS-Tutorial CSS-Layout mit 100%-Höhe u.a. im zweiten Modell "Header und Footer" angewendet.

Über die Suchfunktion hättest du hier im CSS-Board aber auch die entsprechenden Lösungen gefunden, denn diese Frage wurde hier schon desöfteren gestellt.

Zitat von Maik

... und wenn die Höhe des Footers nicht bekannt ist, um ihn mit dem entsprechenden negativen margin-top-Wert nach oben zu schieben, positionierst du ihn eben am unteren Elementrand des wrapper-DIVs ...

Ja aber - dann brauchst du die Footer-Höhe für das padding im wrapper-Block.
In beiden Fällen wird der wrapper-Inhalt vom Footer überdeckt.

Egal, KingOfRap ist offensichtlich mit den Vorschlägen zurecht gekommen.

Hallo hela,

da hast du natürlich recht, dass der Inhalt ohne einen unteren Innenabstand den Footer unterwandern würde.

Wenn die Footer-Höhe nicht bekannt ist, müsste hier der Wert für den unteren Innenabstand entsprechend frei gewählt werden.