✔ 100% Höhe im Firefox

[msycho]

Hallo!

Mein Ziel ist es ein Bild über die komplette Bildschirmgröße vertikal zu wiederholen.
Wenn ich jetzt aber im Firefox schaue, dann wird das Bild nur so lange vertikal wiederholt, wie auch Text darin steht.

Versteht Ihr was ich meine?
Im IE (7 und lte7) passt es.

Hier mal ein Beispiel:

#site {
  text-align: center;
  background: #FFFFFF url(../images/bg.jpg) repeat-y top center;
  height: 100%;
}

Hoffe Ihr könnt mir weiterhelfen.

 

[HuRaHoRRe]

Wenn du das bild über den kompletten Bildschirm wiederholen lassen willst, kannst du es auch einfach in den body packen.

body {
  background: #FFFFFF url(../images/bg.jpg) repeat-y top center;
}

 

[msycho]

Hast Recht, danke!

Trotzdem wundert es mich, dass der Firefox da zicken macht...

Jetzt ist aber auch so, dass der Fuß direkt unter dem Content klebt. Ist also der Content nicht so lange wie die Bildschirmhöhe, ist der Footer auch "mitten in der Seite".
Kriege ich den Fuß jetzt auch noch so platziert, dass er immer unten sitzt?

Wenn ich es so mache

#footer {
  clear: both;
  text-align: center;
  position: relative;
  bottom: 0px;
  height: 20px;
}

dann ändert sich nichts, oder muss ich jetzt auch alle anderen Elemente positionieren?

/EDIT: Ah, mit absoluter Positionierung scheint es zu klappen. Aber jetzt verreißt es mir alles im IE6. :/

 

[Maik]

Hi,

vermutlich muss noch der Viewport und Dokumentkörper eine 100%-Höhe erhalten, damit die Box #site im Browserfenster auf 100% gestreckt wird:

html,body {
height:100%;
margin:0;
padding:0;
}

Zum Footer-Problem:

#site {
  text-align: center;
  background: #FFFFFF url(../images/bg.jpg) repeat-y top center;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
}

#footer {
  clear: both;
  text-align: center;
  position: absolute;
  bottom: 0px;
  height: 20px;
}

Siehe hierzu auch mein CSS-Tutorial CSS-Layout mit 100%-Höhe.

 

[msycho]

Habe erst nochmal etwas rumprobiert und habe es auch anders gelöst:

#footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

Trotzdem danke!

 

[Maik]

und habe es auch anders gelöst:

#footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

Soweit liegen unsere beiden Techniken aber überhaupt nicht auseinander :suspekt:

#footer {
  clear: both;
  text-align: center;
  position: absolute;
  bottom: 0px;
  height: 20px;
}