Footer-Positionierung - mit flexibler Höhe?
Paul Ebermann
ich habe eine Website, wo auf jeder Seite ein div als Footer am unteren
Rand der Seite erscheinen soll.
Ist die Seite kurz (wenig Inhalt/großer Bildschirm), so soll sie am
unteren Rand des Bildschirms erscheinen, ansonsten eben nach dem Inhalt.
(Ich will den Footer nicht schwebend über dem sonstigen Inhalt haben.)
Dazu findet Google mit "CSS footer" diverse Lösungen, die üblicherweise
auf mehrern verschachtelten divs mit width:100%, max-width:100% und
einem padding-bottom der richtigen (festen) Größe beruhen.
Leider passt das nicht bei mir: der Footer-Text ist bei meinem
800x600-Bildschirm schon zwei Zeilen lang, bei kleinerem Fenster
kann das auch 3 oder 4 Zeilen werden. Mal abgesehen davon, dass auch
noch der Nutzer seine Schriftgröße anpassen kann. Ich kann also nicht
wirklich wissen, wie hoch der Footer endlich ist ... und habe also die Wahl:
- ich reserviere ganz viel Platz, so dass im Normalfall eine Menge
Leerraum da ist.
- ich riskiere, dass der Footer den Inhalt überdeckt.
- ich riskiere, dass der Footer aus dem Browserfenster herausragt.
Klingt alles nicht so gut, daher frage ich hier: Gibt es inzwischen eine
CSS-Footer-Lösung, die keine feste Höhe benötigt?
Danke im Voraus
Paul
Thomas 'PointedEars' Lahn
> ich habe eine Website, wo auf jeder Seite ein div als Footer am unteren
> Rand der Seite erscheinen soll.
>
> Ist die Seite kurz (wenig Inhalt/großer Bildschirm), so soll sie am
> unteren Rand des Bildschirms erscheinen, ansonsten eben nach dem Inhalt.
> (Ich will den Footer nicht schwebend über dem sonstigen Inhalt haben.)
Das sind in CSS widersprüchliche Anforderungen. Entweder positionierst Du
den Footer absolut bezogen auf den Viewport, dann kann es passieren, dass er
den restlichen Inhalt überdeckt. Oder Du positionierst den Footer relativ
bezogen auf den übrigen Text.
> Dazu findet Google mit "CSS footer" diverse Lösungen, die üblicherweise
> auf mehrern verschachtelten divs mit width:100%, max-width:100% und
> einem padding-bottom der richtigen (festen) Größe beruhen.
Und wahrscheinlich ausserdem clientseitiges Scripting verwenden. Diese
"Lösungen" will man nicht wirklich verwenden. Für einen einfachen Footer
reicht *ein* div-Element.
--
PointedEars