Ein DIV am unteren Fensterrand "positionieren"

von **Gegengift** » 19.06.2011, 13:30

Hallo.

Meine Seite ist folgendermaßen aufgebaut:
Bereich links gefloatet (Navigation oben, Footer unten)
Bereich rechts (Content)
Ich möchte den Footer im linken Bereich am unteren Fensterrand haben, so dass erst ein Scrollbalken entsteht, wenn Footer auf Navigation trifft. (Für den Fall, dass Content nicht höher als Navi ist)

position: fixed; bottom: 0; --> geht die Richtung - kann man aber ja vergessen wegen IE..
position: absolute; bottom: 0; -->geht auch nicht, weil Footer sich dann "unberechenbar" verhält. Je nach dem, ob der Content (rechts) länger ist, als das Fenster. Scrollt man dann, scrollt der Footer (links) mit.. Bzw. wandert erst wieder nach unten, wenn man das Fenster zieht.. oO

Dann hab ich rumprobiert mit Footer padding-top: 100% usw. aber das funktioniert alles nicht..

Vielleicht hat da jemand eine Idee, wie man sowas macht..

von **sejuma** » 19.06.2011, 16:19

Das sollte helfen:
http://www.ohne-css.gehts-gar.net/0044.php

von **Gegengift** » 19.06.2011, 18:49

Danke..

Muss ich den Wrapper nur um das Linke-Spalte-Div legen oder über den gesamten Inhalt?

Ich hab bei "Demo 3" mal den Text wegeditiert - also von "H4/Verwendete CSS" Angaben bis "p class center".. Dann bekomme ich aber eine Seite, die im FF4 immer einen um 1px verschiebbaren Scrollbalken hat und im IE8 ist das Ganze "fest" - also der Footer befindet sich am Ende des Inhalts und nicht am unteren Fensterrand, wie bei "Demo 2". Der Footer verschwindet also bei zu kleinem Fenster..

Mach ich da jetzt was falsch? Weil so ist das ja unbrauchbar..

Ich poste mal den editierten Quelltext zur Sicherheit..

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Footer unten - Teil III</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <style type="text/css"> * { margin: 0; } html, body { height: 100%; font-size: 100%; font-family: Verdana; } p { padding: 10px; } h1 { text-align: center; background: #009; color: #fff; padding: 10px 0; height: 2em; font-size: 1.5em; } h4 { padding: 10px; } #wrapper { position: relative; min-height: 100%; background: #A9A9A9; width: 900px; margin: 0 auto; border: 1px solid #009; } * html #wrapper { height: 100%; } #content { padding: 1em 1em 2.5em 1em; } #footer { position: absolute; bottom: 0; width: 100%; line-height: 1.5em; text-align: center; background: #8B8878; } </style> </head> <body> <div id="wrapper"> <div id="content"> <h1>Unten platzierter Footer</h1> <p>Der Footer befindet sich am unteren Rand des Wrappers, auch im IE 6</p> <p class="center"> <a href="../0044.php">zurück zur Anleitung</a><br> <a href="../index.php">zur Startseite</a> </p> </div> <div id="footer"> Footer </div> </div> </body> </html>

von **sejuma** » 20.06.2011, 06:31

Der Scrollbalken resultiert aus dem 1px border beim #wrapper. Der kommt noch zu den 100% Höhe dazu, so dass die Gesamtseite höher als 100% wird, was zum Scrollen führt.

Das Verhalten des IE 8 kann ich momentan nicht nachvollziehen, da ich diesen Browser nicht verfügbar habe.
Ich vermute aber, dass bei zu kleinem Fenster der Foooter dann deshalb nicht sichtbar ist, weil vorher ja noch Inhalt kommt. D.h. man müsste dann korrekterweise zum Footer runterscrollen.

Ich sehe mir das aber heute Abend gerne nochmal im IE 8 an.

von **Gegengift** » 20.06.2011, 06:59

Der Scrollbalken resultiert aus dem 1px border beim #wrapper

Ah ja ok. Den Balken könnte man ja auch weglassen. Hab ihn grad mal weggemacht und das Ergebnis ist im FF wunderbar..

Ich sehe mir das aber heute Abend gerne nochmal im IE 8 an.

Danke das wäre nett. Ich hab ewig gesucht im Netz, doch irgendwie funktioniert es nie. Unter "Demo 2" funktioniert es. Jedoch ist das ja auch wieder nicht IE6 kompatibel. Wenn der IE egal wäre, könnte man ja auch einfach position:static nehmen.

So. Habs grad noch mal im IE8 angesehen. Da ist die Anzeige davon abhängig, wie groß das Fenster beim Öffnen ist - sowas hab ich noch nie gesehen... (IE verhält sich also komplett anders als FF) Der Footer ist zwar immer korrekt unten platziert beim Öffnen mit IE, bleibt dann aber auch dort fest, egal was ich mit dem Fenster mache.. Wenn ich es zusammenschiebe kommt Scrollbalken, wenn ichs auseinanderschiebe kommt entsteht weißer Rand unter dem Footer... :shock:

Witzig (oder auch nicht).. Opera verhält sich wie eine Mischung aus IE und FF... Wenn ich das Fenster unten (nicht unten Kante) auseinander schiebe, bleibt der Footer statisch fest und es entsteht weißer Rand. Wenn ich es nach oben schiebe, rutscht der Footer wieder kurz nach unten und wird dann vom nach oben kommenden Fensterrand verdeckt + Scrollbalken... :shock:

Nur wenn ich ihn an einer Fensterecke ziehe, verhält er sich wie FF....

von **Gegengift** » 20.06.2011, 07:03

Wenn ich das Fenster unten (nicht unten Kante) auseinander schiebe

Falsch. Richtig: Wenn ich das Fenster unten Fensterrand Kante (nicht unten ECKE) auseinander schiebe.....

von **djheke** » 20.06.2011, 08:15

Hallo,

clearfix soll wohl das verhalten verbessern.
aber wie oft zoomt man das browserfenster ??

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}

/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */

mfg

von **djheke** » 20.06.2011, 09:43

Oder, wenn du bereit bist ein leeres element einzufügen, dann gibt es noch so eine möglichkeit.
http://www.gipspferd.de/css/anleitung/a14/html.htm

von **sejuma** » 20.06.2011, 18:19

Prinzipiell funktioniert deine Version auch im IE 8.
Allerdings hat der in der Tat ein recht komisches Verhalten: Je nachdem wie hoch gerade das Fenster aufgezogen ist, erscheint mal der Footer oder eben auch nicht, bzw. man muss unnötiger Weise scrollen.

Sollten die Vorschläge von djheke nicht helfen (ich habe sie nicht ausprobiert) schlage vor, über dieses seltsame IE-Verhalten großzügig hinwegzusehen.
Ich hatte mal das gleiche Problem, jedoch in einem anderen Zusammenhang und ebenfalls keine Lösung gefunden.

von **Gegengift** » 20.06.2011, 21:34

@sejuma
Danke dir. Also beim Opera geht es auch nicht (verhält sich fast wie der IE). Das bedeutet, dass das Layout im IE und O kaputt geht.. Zwar ist der Footer beim Öffnen immer unten. Verändere ich aber die Fensterhöhe (wenn ich mit der Maus nicht an die Ecke des Browserfensters gehe, sondern an den unteren Rand), dann machen die Browser alles zunichte.. (wenn ich an die Ecke gehe, dann macht der O wieder etwas anderes als der IE)..

@djheke

clearfix soll wohl das verhalten verbessern.
aber wie oft zoomt man das browserfenster ??

Meinst du mit "zoomen" das Fenster verändern? Ständig!
Das mit dem clearfix check ich nicht. Beschäftige mich auch erst seit einem Monat mit CSS :wink:

Worauf muss die Klasse denn angewendet werden?
2. Lösung.. hochgradig perfekt. Danke! Das funktioniert einwandfrei!! Im IE + Opera auch.. So voll und ganz versteh ich die Wirkungsweise aber auch da nicht^^ Kannst du mir das noch mal erläutern.. Müssen alle Elemente gefloatet sein?

von **djheke** » 20.06.2011, 21:37

Hallo,

ich habe mal den berühmten opera fix etwas abgeändert und zur sicherheit in einer externen css datei gelegt.
also, wenn ich mich nicht irre ist eine spürbare besserung im ie 8 eingetreten.

http://www.gipspferd.de/forumhilfe/footerstickyalt.htm

von **djheke** » 20.06.2011, 21:40

achso, hier der fix

{code]
#content:after {
content:"";
height:100%;
float:left;
}
[/code]

und so wirds eingebunden

Code: Alles auswählen:

von **Gegengift** » 20.06.2011, 22:23

Das ist mir jetzt zu hoch...

Gegen das leere gefloatete Div spricht doch nichts oder.. Denn das funktioniert wunderbar. Ich hab es nur noch nicht angewendet aber mal sehen..
Das footerstickyalt geht übrigens im IE hervorragend .. nur im Opera nicht^^

von **djheke** » 21.06.2011, 07:28

Ich persönlich habe nichts gegen leere Elemente. Denn in vielen Webseiten befinden sich leere Elemente die nur zum Layouten notiert sind. Die Vollprofis stoßen sich eben daran. Im aktuellen Beispiel ist es ja gerademal ein leeres Element. Also sollte nichts dagegen sprechen.

Du musst übrigens nicht alle Elemente Floaten. Meine empfohlende Aufteilung sieht so aus.

oben (gefloatet optonal)
mitte (gefloatet)
unten (gecleart)

Das Verhalten im Opera ist auch mit den Opera Fix nicht ganz zu beheben. Aber so oft verändert man ja seine Browserfenstergröße nicht.

von **Gegengift** » 23.06.2011, 07:19

So vielen Dank nochmal für die guten Lösungen. Hat wirklich geholfen.

von **Azra** » 28.06.2011, 08:12

Es ist ganz einfach:
zusätzliche Elemente = zusätzliche Ladezeiten

Warum sollte ein Seitenbetreiber mit einer inhaltlich starken Webseite (so etwas wie amazon.de) also durch zusätzliche Ladezeiten Besucher verlieren statt solche einfach zu umgehen?
- bzw.
Warum sollte überhaupt eine Webseite unnötig länger laden? Hier geht es nicht um Profi oder nicht sondern einfach um Benutzerfreundlichkeit und wie man dem entgegenkommt.

Ein DIV am unteren Fensterrand "positionieren"

Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Re: Ein DIV am unteren Fensterrand "positionieren"

Ähnliche Beiträge zu "Ein DIV am unteren Fensterrand "positionieren""

Wer ist online?