Footer für den Rest des Browser-Fensters

[Marianne]

Hallo

Wahrscheinlich ganz einfach, aber ich komm nicht drauf:

Ich habe ein einfaches Layout: oben eine Kopfleiste mit fixer Höhe, darunter den Inhaltsbereich (natürlich variabel, je nach Inhalt) und als Abschluß einen Footer.

Um diesen Footer geht es:
Wie kann ich es erreichen das der Footer die Resthöhe des Browserfensters einnimmt?
Also wenn wenig Inhalt ist soll der Footer vom unteren Rand des Inhaltsbereiches bis zum unteren Browserrand reichen (da soll ein höheres Hindergrundbild rein...).
Wenn der Inhalt mehr wird (sodaß gescrollt werden muß) soll er am Ende der Seite liegen und eine bestimmte Höhe haben.

Hat da wer einen Tip der mit weiterhelfen könnten?

Danke
M.

[wahsaga]

hi,

Also wenn wenig Inhalt ist soll der Footer vom unteren Rand des Inhaltsbereiches bis zum unteren Browserrand reichen (da soll ein höheres Hindergrundbild rein...).
Wenn der Inhalt mehr wird (sodaß gescrollt werden muß) soll er am Ende der Seite liegen und eine bestimmte Höhe haben.

Du willst also einen Footer, der

• immer unterhalb des Inhaltes anfängt, und
• entweder bis zum unteren Viewportende geht (bei kurzem Inhalt), oder eine Mindesthöhe hat (bei Inhalt + Footermindestgröße > Viewport).

Dazu müsstest du m.E. deinen Seiteninhalt in einen Div-Container legen, der eine Mindestgröße von 100% hat. Dieser bekommt dann ein unten positioniertes, nicht gekacheltes Hintergrundbild verpasst. Die Mindest"höhe" dieses Footers könnte über ein entsprechendes padding-bottom des (letzten Bestandteils des) Inhaltes realisiert werden.
Allerdings wird damit immer der untere Teil des Hintergrundbildes zu sehen sein, und bei Vergrößerung des Footers nach oben entsprechend mehr vom oberen Teil. Wenn das nicht der beabsichtigte optische Effekt ist, fällt mir spontan keine reine CSS-Lösung ein, dann müsste man vermutlich zusätzlich Javascript bemühen, um das Hintergrundbild dynamisch passend zu positionieren.

gruß,
wahsaga

[Marianne]

Hi wahsaga

Allerdings wird damit immer der untere Teil des Hintergrundbildes zu sehen sein, und bei Vergrößerung des Footers nach oben entsprechend mehr vom oberen Teil. Wenn das nicht der beabsichtigte optische Effekt ist, ...

Danke für Deine Hilfe...
Das ist das Problem: das Hintergrundbild soll "von oben nach unten" sichtbar sein.

Mmh, mal weiter grübeln...

M.

[wahsaga]

hi,

Das ist das Problem: das Hintergrundbild soll "von oben nach unten" sichtbar sein.

Tja, dann würde ich wohl doch Javascript zu Hilfe nehmen.

Den Footer einfach unter dem Content platziert, Höhe gleich Gesamthöhe des Hintergrundbildes. Besucher ohne JS sehen das Bild dann halt in voller Größe, und durch den hohen Footer haben sie ggf. auch auf einer Seite mit wenig Inhalt noch einen Scrollbalken.

Per JS nun die Höhe des Viewports [1] und des Inhaltsbereiches (.offsetHeight des Inhaltscontainers) ermitteln. Wenn die Differenz der beiden größer als die gewünschte Mindesthöhe für den Footer ist, dem Footer diese Differenz als Höhe zuweisen (.style.height), ansonsten die Mindesthöhe.

gruß,
wahsaga

[1] http://www.quirksmode.org/viewport/compatibility.html

[Marianne]

Danke!

Bei Javascript bin ich zwar nicht so fit aber ich werde es mal versuchen.

M.

[Dennis]

Hi wahsaga,

Dazu müsstest du m.E. deinen Seiteninhalt in einen Div-Container legen, ...

Je nach dem, wie die restliche Seite aufgebaut ist und ob body schon in irgendeiner anderen Form „verwendet” wird, könnte man hier auch direkt das body-Element nehmen und hätte damit einen weiteren Div-Container gespart.

MfG, Dennis.

[Ashura]

Hallo Dennis.

„verwendet”

Denglische Typografie?

Einen schönen Donnerstag noch.

Gruß, Ashura

[Dennis]

Hi Ashura,

„verwendet”

Denglische Typografie?

hm? ka - wäre „das hier“ deutsche und “das” englische?

MfG, Dennis.

[Ashura]

Hallo Dennis.

„verwendet”

Denglische Typografie?

hm? ka - wäre „das hier“ deutsche und “das” englische?

Jawohl.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Dennis]

Hi Ashura,

hm? ka - wäre „das hier“ deutsche und “das” englische?

Jawohl.

gut, wieder was gelernt :-)

MfG, Dennis.