Body-Höhe an Browserfenster anpassen

Hallo,
ich wieder mal mit einem neuen Problem.

Ich möchte, dass der Footer meiner Seite automatisch am unteren Rand meines Browserfensters ist, wenn der Inhalt vom Content kleiner als das Browserfenster ist.

Hier: [Problem gelöst!]kann man es z.b. sehen, dass ich scrollen muss, obwohl ja die Seite noch garkeinen Inhalt hat. Ich will aber, dass der Footer noch innerhalb meines Fensters ist und man somit auch noch nicht scrollen muss.

Kann mir jemand mit dem Code helfen?

Die sauberste Variante wäre ein innerhalb eines umgebenden Containers absolut unten positioniertes div, welches den Footer enthält. Problem ist, dass hier das Verhalten besonders beim IE6 sehr problematisch ist. Der Lösungsweg wäre so in etwa:

html, body { height: 100%; } #wrapper { height: 100%;position: relative } #footer { position: absolute;bottom: 0px;left: 0px; }

#Content beginnt unterhalb anderer Elemente und hat min-height: 100%.
Das bedeutet mindestens 100% vom body + dem darüber liegenden Platz. #Content ist also größer wie body.

#Content muß alle Elemente umspannen und darf weder border, margin oder padding haben welche die Höhe beeinflussen.

Dann umspannst du alles innerhalb von #Content, außer #Footer mit einem weiteren

dieser div hat keine Höhenangabe und ein padding-bottom welches der Höhe von #Footer entspricht.

#Footer hebst du mit einem negativen margin nach oben an.

html:

[code]
[B]

[/B]




© Copyright aller Fotos und Texte: Binder 2008 | v.d.Erlau@GMail.com | Home



[/code]css (nur Änderungen):
[code]
#Content {
background-color: #ececec;
min-height: 100%;
padding: 0;
margin: 0;
/border-top: solid 2px #787878 (Kein padding, margin oder border)/
}

/IE6/

  • html #Content {
    height: 100%;
    }

#Content_ohne_footer {
padding-bottom : 10em;
}

#footer {
background-color: #dedede;
text-align: center;
height: 4em;
/border-bottom: solid #787878 3px;/
margin: -4em 0 0 0;

padding: 0;
/padding: .6em 0 .6em 0; (kein margin padding oder border)/ }
#footer p {
font-size: .7em;
padding:0.5em 0 0 0;
margin: 0;
}
[/code]Den border-bottom könntest du gegen eine Hintergrundgrafik austauschen und unten positionieren.

threadis Vorschlag bräuchte ebenfalls min-height für Content, den kleinen Hack für IE6 und das weitere Element (#Content_ohne_footer).
Ich würde die Methode mit dem negativen margin wählen.

Zu Erläuterung: HTML orientiert sich an der Höhe des Viewpoint des Browsers. Wenn du HTML und BODY also height: 100% gibst, dann sollten beide so groß wie der Viewpoint sein, denn eines orientiert sich am vorhergehenden.

Vielen Dank wieder einmal für eure tolle und ausführliche Antwort.

Ich habs heute nachmittag studiert und soweit eigentlich begriffen.
Bei der Umsetzung bin ich dann allerdings kläglich gescheitert.

Unterm Footer waren immer noch ca. 100Px Platz und der Footer war irgendwo in der unteren Hälfte des Browser.

Naja, ich werde weiter üben :wink:

Vielen Dank nochmals, auf euch kann man wirklich zählen.

Gucke mal hier:
Mitwandernder Footer immer unten

Ui danke!
Der Link ist sehr gut.

Soweit bin ich mit meiner HP zufrieden;
hab sie heute allerdings im Opera ausprobiert und die pre-Schrift unter „Links“ wird nun viel zu groß. Wenn ich einmal auf - drücke, dann passt die pre Schrift, aber die p-Schrift nicht mehr.

In Opera kann man ja direkt den Quelltext verändern und ausprobieren, aber leider scheint ihm keiner meiner Versuche zu gefallen.
Was braucht der Opera, um die Schrift „Monospace“ so anzuzeigen, wie z.b. firefox?

Hallo,

ich bins mal wieder.

Wollte nicht extra einen neuen Thread aufmachen… ist wirklich nur eine Kleinigkeit:

Bei meiner HP funktioniert soweit alles klasse und ich bin auch ein bisschen stolz… zumal ja alles selbst gezeichnet, designed usw ist.

Das einzige Problem ist der Footer. Er funktioniert in Opera und Firefox und Chrome einwandfrei, aber beim Internet Explorer (wie sollte es auch anders sein) rutscht die Schrift zu weit nach oben; sie ist also vertikal gesehen nicht mehr in der Mitte des Containers. Wieso?

Liebe Grüße
Lisa

Im IE7 passt es.
Warum das im IE6 nicht klappt weiß ich nicht. Ich würde mich auch sonst nicht auf die automatische Schrifthöhe / Zeilenhöhe verlassen wenn eine bestimmte Gesammtöhe eingehalten werden muß. Die vareiert nach Schrift-typ und Umgebung etwas.
Schreibe es mal so:

#footer {
	height: 2.5em;
[COLOR="DarkRed"][B]line-height: 2.5em;[/B]
	background-color: #cecece;
	text-align: center;
	font-size: .7em;
	border-bottom: solid #787878 3px;
	margin-top: -3.7em;
[COLOR="DarkRed"][B]	/*padding: .2em 0 .6em 0; entfernen*/[/B]
}

OT:
Mein Kater macht ähnliche Dinge wie der Benny. Im Sommer hat er rausbekommen das es sich vor dem Kühlschrank gut dösen läßt, wenn Mann die Tür vorher aufmacht. Jetzt macht er sie auch so auf und sucht sich dann eine wärmere Ecke. Einfach nur weil er es kann.

Neuro, auf dich kann man immer zählen.
Es hat tatsächlich geklappt.
Ich dachte mir schon, dass ich für den IE irgendwas mit line-height machen musste…
Hab mich allerdings nicht getraut, die Polsterung direkt wegzumachen.
Aber es klappt.

Allerdings kann man jetzt bei allen Browsern, außer beim guten Firefox, scrollen. Womit wir wieder beim Eingangsthema wären. Der Footer soll ja ganz unten sein, und somit wäre der Scrollbalken weg.

Hast Du dafür vielleicht auch noch die Lösung?

Edit: Ich benutze den IE7! Also bei mir klappte es beim siebener nicht. Bei deinem gings?

[B]
[SIZE=1]OT: O je, dann bist du quasi auch mit so einem verrückten Kater gestraft? Teilweise leiden wir schon sehr unter seiner Tyrannei… Er macht einfach viel kaputt und ärgert die anderen Katzen und ist laut und tollpatschig… Naja.
Das mit dem Kühlschrank ist ja echt wahnsinn lol Auf was sie nicht alles kommen… sind schon kluge Tiere! Was machst du nun? Hast du irgendeine Vorrichtung dran?

[/SIZE][/B]

In der alten Version war das so:
Im IE7 funktionierte die Zentrierung. Im IE6 nicht.
Im IE7 klaffte eine kleine Lücke zwischen footer und Seitenende.

Du mixt em und px-Werte in den Höhenangaben.
Für #wrapper_innen ein padding-bottom in em und für den footer height in px.
Das kann nicht funktionieren.
Gebe mal alle Höhenangaben in em an:

#wrapper_innen {
padding-bottom: 3em;
}
#footer {
height: 3em;
line-height: 3em;
background-color: #cecece;
text-align: center;
/*border-bottom: solid #787878 3px; den border lass mal weg
bis der Rest funktioniert*/
margin-top: -3em;
}

Die font-size passt du besser erst in #footer p an.

#footer p {
font-size: 0.5em
}

Ich habe nicht die Möglichkeit das in allen wichtigen Browsern, unkompliziert auszutesten ohne die gesammte Seite runterzuladen.
Wenn diese Änderungen keinen Erfolg bringen kann ich dir vermutlich nicht helfen.
Tips zu einem anderem Forum (mit css-Experten) dürfen wir in diesem Forum leider nicht geben.

[COLOR=„DarkSlateGray“]Den verrückten Kater empfinde ich nicht als Strafe.
Er tut was er als Ranghöherer meint tun zu müssen.
Zeigen was er kann und der Katze Imponieren.
Die legt sich auch gerne mal daneben und guckt sich seine „Marotten“ interessiert an.

Am Kühlschrank ist jetzt eine Kindersicherung. *gg

Hallo Neuro,
es hat leider nichts gebracht; im Gegenteil wird der Abstand sogar noch größer unter dem Footer.

Ich weiß nicht, welches gute Forum du meinst, habe aber heute nach einem weiteren gegoogelt. Vielleicht hat da jemand noch eine Idee… :frowning:

Trotzdem wieder vielen Dank für deine Mühen, die du dir immer machst.

div#content hat mindestens 100% der Höhe des Elternelements. Da darüber noch etwas steht, ragt der Footer um diese Höhe nach unten raus.

Gruß
Junny

Hallo Junny,

habe mich sehr über deine Antwort gefreut.

Ich habe mittlerweile schon *{margin 0; padding 0}
eingefügt und p mit padding .8em 0; wieder angepasst…
Vielleicht scheitert es ja an dem, dass die Größen nicht einheitlich sind.

Du sagst, dass der footer quasi um die Höhe von „Navigation“ und „Banner“ herausragt. Das wären dann 130 Pixel…

Mal versuchen, ob ich das so hinkriege, dass ich Content um die zwei Container spanne. Ich versuchs mal im WebDeveloper.

Oder wär es sinnvoller, das 100% von Content zu löschen?

Liebe Grüße
Lisa

Die min-height: 100%; sorgen dafür, dass der Content den ganzen Viewport auch dann ausfüllt, wenn der Inhalt darin weniger Höhe erfordert.
Der Footer kommt dann danach und wäre eigentlich genau aus dem Sichtbereich draußen, aber das negative margin-top, das genau seiner Höhe entspricht, zieht in genau ans Ende des Viewports.

Gruß
Junny

Somit brauche ich die 100% und muss den Footer mit margin: negativ genau um seine Höhe wieder reinziehen. Richtig?
So habe ich das verstanden.

Wofür aber habe ich dann den wrapper und wrapper_innen um die Container gespannt, so wie es auf Link erklärt ist?

Ich habe nun gerade den Content um Banner und Navigation usw. gezogen; leider bleibt der weiße Streifen unten trotzdem noch. Außerdem habe ich das Problem, dass die Schrift im Footer nun ganz unten ist.

Habs direkt hochgeladen.

Edit: der Universalselektor * margin, padding 0
bringt den IE total durcheinander!!
Scheinbar kennt er p {padding: .8em 0} nicht, weil alles zusammenklebt.
ICH HASSE DEN IE!!!
Ich dreh hier noch durch.

Du machst Scherze, die finden die Browser aber nicht lustig.

#footer { height: 2.5em; line-height: 2.5em; background-color: #cecece; text-align: center; border-bottom: 2Px solid #787878 ; margin-top: -3.2em; }

Nimm mal line-height sowie border-bottom raus und änder margin-top auf -2.5em. Wenn dann noch Darstellungsfehler kommen, beheben wir sie anders.

Der Universalselektor setzt alle Innen- und Außenabstände auf 0. Dann ist erstmal alles zusammengequetscht, ja. Dass er die von Dir genannte Angabe nicht versteht, wäre mit neu. Versuchs mal mit ner 0 vor dem Punkt und einem Semikolon am Ende. Ich sehe den Fehler allerdings weder im IE6 noch im IE7.

Gruß
Junny

Junny,

line-height habe ich extra für den IE eingefügt, weil er doch padding nicht versteht; siehe Posting von Neuroleptika.

Habe eben line-height rausgenommen; nun rutscht die Schrift nach oben.

Mit line-height sah es besser aus.

Trotzdem ist im Opera noch der weiße Streifen unten.

wrapper_innen muss vor den footer, wrapper muss außerhalb vom footer, richtig?

Das hatte ich die ganze Zeit auch falsch… ojemine.

Mit dieser CSS ging es bei mir. Ich weiß nicht, was Du inzwischen alles geändert hast.

[CODE]/* Binder Lisa

September 2008 */

  • {margin: 0; padding: 0;}
    #wrapper {
    min-height: 100%;
    background-color: #ececec;
    }

  • html #wrapper {
    height: 100%;
    }

#wrapper_innen {
padding-bottom: 2.5em;

}

html, body {
margin:0;
padding:0;
min-width: 900Px;
min-height: 100%;
height: 100% !important;
height: 100%; }

p { font-family: Verdana;
font-size: .8em;
color: #1e2a36;
padding: .8em 0;}

h1 {font-size: 1.1em;
font-weight: normal;
font-family: Georgia, Verdana;
color: #393939;
margin-left: 100px;}

a { color:#1e2a36;}
a:link, a:visited {text-decoration:none;}
a:hover, a:focus, a:active {text-decoration:underline;}

#Banner {
background: #1e2a36 url(Logow.png) repeat-x;
height: 101px;
width: auto;
text-align: center;
}

#Logo {
margin: 0 auto;
background: url(Banner4.png) center no-repeat;
width: 630Px;
height: 102Px;}

#lao {background-image: url(laou.png) ; position: absolute; top: -1Px; left: 0; width: 275px; height: 130px; z-index: 100 }
#LaoLi {background-image:url(laoli.png); position: absolute; top:-1Px; left: 0; width: 275px; height: 130px; z-index: 100 }

  /* Navigation */

#navcontainer {
margin: 0 auto;
height: 28px;
background: #1e2a36 url(Linkleiste.png) repeat-x left top;
text-align: center;}

#navcontainer ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
height: 28px;
width: 729px;
background: url(Linkleiste.png) #1e2a36 repeat-x;
}

#navcontainer li {
display: inline;}

#navcontainer ul li {
display: inline;
margin: 0;
padding: 0;
width: 81Px;
height: 28Px;
}

#navcontainer ul li a {
display:block;
height: 28Px;
width: 81Px;
float: left;}

#navcontainer ul li a span {
display: none;}

#navcontainer ul li a.home {
background: url(Home.png) center no-repeat;
}
#navcontainer ul li a.benny {
background: url(Benny.png) center no-repeat;
}
#navcontainer ul li a.gina {
background: url(Gina.png) center no-repeat; }

#navcontainer ul li a.linou {
background: url(Lin.png) center no-repeat;
}
#navcontainer ul li a.Kitten {
background: url(Kitten.png) center no-repeat;
}
#navcontainer ul li a.Galerie {
background: url(Galerie.png) center no-repeat;
}
#navcontainer ul li a.Kontakt {
background: url(Kontakt.png) center no-repeat;
}
#navcontainer ul li a.Links {
background: url(Links.png) center no-repeat;
}
#navcontainer ul li a.Gast {
background:url(Gast.png) center no-repeat;
}

  /* Inhalt */

#Content {
background-color: #ececec;
min-width: 900Px;
width: auto;
min-height: 100%;
height: auto;
padding: 1em 0 4em 2em;
border-top: solid 2Px #787878;
}

#Text {
width: 700Px;
float: left;}

#News {
width: 180Px;
float: right;
text-align:justify;
padding: 1em;
display: block;}

#News h1 {
font: inherit;
margin: 0;
font-family: Georgia, Verdana;
font-size: 1.1em;}

#footer {
height: 2.5em;
background-color: #cecece;
text-align: center;
margin-top: -2.5em;
}

#footer p {font-size: .6em}

#Adresse, #Adresse a {
color: #1e2a36;
width: auto;
text-align: center;}

#Zentriert {
width: auto;
text-align: center;}

.Counter {
width: 0;
height: 0;
display: none}

html:first-child>b\ody .dsR30 {margin-left: 26px; width: 430Px; height: auto; border: 3Px solid #787878; background: white; padding: .5em .5em .5em .5em;}
html:first-child>b\ody .dsR30 p {font-size: .8em;}

   /*Galerien*/

.photo {padding:20px; background:#222; width:900px; height:600px; text-align:left; margin: 0 auto;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {margin: 0 auto; list-style:none; padding:0; width: 868px; height: 146px; border:1px solid #666; position:relative; }
.photo ul li {display:inline; width:60px; height:60px; float:left; margin:6px;}
.photo ul li a {display:block; width:60px; height:60px; cursor:default; background:url(Pfote.png) no-repeat; text-decoration:none;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:60px; height:60px; border:1px solid #666; border-top-color:#ccc;}

.photo ul li a:hover {white-space:normal;position:relative;}

.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:96px; height:128px; border-color:white;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:128px; height:96px; border-color:white;}

.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}

.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:222px; top:160Px; width: auto; height: 430Px;; border:1px solid #white; padding:5px 5px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:222px; top:160Px; width: 640Px; height: auto; border:1px solid #white; padding:5px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {font-family: Verdana; font-size: .85em; display:block; text-align: justify; position:absolute; width:200px; height: auto; top:160px; left:0; color:#ddd; font-weight:normal; padding:5px;}

    /* Bannerbilder */

.Gina {float: left; position: absolute; margin: -12Px 0 0 -330Px; width: 197Px; height: 200Px;}
.Lin { margin-left: 3em; border: solid 2px black; width:448Px; height:299Px;}
[/CODE]

Das Problem im IE kannst Du angehen, wenn es in vernünftigen Browsern läuft. Ich empfehle Dir, die Fixes dafür mithilfe von Conditional Comments einzubinden, um die Darstellung in ersteren nicht zu beeinflussen.

Auf der von Dir verlinkten Seite sind zwei Wrapper vor dem Footer, der Footer hat body als Elternelement.

Gruß
Junny

Huhu,
ich wollte nur mal über den neuesten Stand berichten!

Der FootStickAlt auf meiner Seite funktioniert mittlerweile perfekt im Firefox.
Ihr werdet nicht glauben, an was es gelegen hat: Ich hab doch tatsächlich sowohl den wrapper_innen, als auch den wrapper um die jeweils gleichen Elemente gespannt… hätte mir also beide sparen können. Natürlich muss der Footer außerhalb von wrapper_innen sein.

Letztendlich hab ich nun die Methode eines Amerikaners probiert; er macht es mit position:relative für wrapper und position:absolute für Footer…
Das klappt so ganz gut.

Die anderen Browser streiken nach wie vor; selbst Opera und Chrome, wobei das Problem teilweise nur bei der index.html auftritt? Komisch…

Falls irgendjemand eine zündende Idee hat und mir eeeendlich zum Durchbruch verhelfen möchte, nur her damit :wink:

Liebste Grüße…
Lisa

PS: Bin hier grad im Opera und der lässt mich keines der Symbole hier um den Antwortbereich anklicken… (z.b. Smileys, Verlinkungssymbol, Schriftgröße einstellen…) Versteh mal einer diese Browser.