absolute Positionierung aber trotzdem Inhaltsanpassung

von **Basti** am 15.12.2007, 14:15

Hi,

derzeit stehe ich wieder vor einem Problem bei der Umsetzung einer Seite in CSS.
Die Besonderheit bei dieser Seite ist, dass sowohl der Header als auch der Footer sich immer ganz oben bzw. ganz unten befinden sollen.
Beim Header ist das auch kein Problem, da sich dieser ja immer ganz oben befindet. Wenn man nun den Footer absolut positioniert, sodass der bei einer Seite die nicht über die Browserfenstergröße hinausgeht immer am unteren Rand des Browserfensters erscheint, dann geht das auch noch.

Mein Problem ist nun aber, wenn ich Inhalte habe, die größer als das Browserfenster sind. Idealerweise sollte sich dann der Footer mitverschieben, bei einer absoluten Positionierung geht das aber nicht. Wenn ich aber die Positionierungsart auf relative verändere, dann ist der Footer im ersten Fall wieder nicht am unteren Rand des Browserfensters.

Hatte jemand schonmal ähnliche Probleme oder kann mir sagen, ob sich dieses Problem so überhaupt mit CSS lösen lässt?

von **Elchi3** am 15.12.2007, 17:04

Hallo!
Ich hoffe mal das ist es was du meinst, denn ich hatte auch schon mal so ein ein Problem.
Bei wenig Inhalt : Ist der Footer am unteren Rand des Browsers
Bei viel Inhalt: Ist der Footer unter dem Content-Bereich.

Hier also mein Vorschlag:

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Footer-Prob</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> html, body {height: 100%;} body {margin: 0; padding: 0;} #content {width: 43em; margin: auto auto; min-height: 100%; position: relative;} * html #content {height: 100%;} /* IE Hack für 100 % Höhe */ #footer {position: absolute; bottom: 0; left: 0; width: 100%;} * html #footer {bottom: -1px;} /* Nächster IE Hack, da bottom: 0; als bottom: 1px interpretiert wird */ /* Nur was fürs Aussehen */ #footer, #content {border: solid 1px #000000;} </style> </head> <body> <div id="content"> <p>Content</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <div id="footer">Footer</div> </div> </body> </html>

Da ist jetzt wenig Inhalt, aber du kannst ja mal ein wenig Blindtext dazufügen um es zu testen :thumbsup:

Gruß,
<Elchi3>

von **Ingo** am 15.12.2007, 19:09

Hi. - Jup, Elchi3, irgendwie so sollte es gehen. Mein Senf noch dazu:

Mit body { margin:0; padding:0; } ist der FireFox unzufrieden (Footer zu tief,
falls die border-Angabe ausgeschaltet wird). Mit * { margin:0; padding:0; }
klappt es besser; ist überhaupt ne gute Idee, die ich übrigens hier im Forum
aufgeschnappt habe.

So wie's aussieht, braucht man für den IE6 (und später?) den '-1px'-Hack nicht
mehr; der IE - ein steter Quell von CSS-Rätseln

Eine Kleinigkeit noch: Wenn der Inhalt länger als die Bildschirmseite wird, läuft er
'hinter' den Footer - er hört nicht oberhalb auf. Zur Not könnte man also den Inhalt
mit ein paar Leerzeilen abschließen, um nach unten hin Platz freizuhalten für den
Footer.

Grüße, Ingo

von **Basti** am 15.12.2007, 21:33

Vielen Dank schonmal für euere Antworten, das mit den Hacks kannte ich so sogar gar nicht (mir waren bisher nur die verschiedenen CSS Dateien bekannt).

Nach längerem Ausprobieren und Rumfriemeln habe ich nun eine anscheinend funktionierende Version hinbekommen, ich muss mir das aber nacher nochmal genauer ansehen. Die Tipps waren auf jeden Fall sehr hilfreich :thumbsup:

absolute Positionierung aber trotzdem Inhaltsanpassung

absolute Positionierung aber trotzdem Inhaltsanpassung

Re: absolute Positionierung aber trotzdem Inhaltsanpassung

Re: absolute Positionierung aber trotzdem Inhaltsanpassung

Re: absolute Positionierung aber trotzdem Inhaltsanpassung

Wer ist online?