[TYPO3-german] ot: CSS mit Bild unterkante Browserfenster ausgerichtet

Mon Aug 13 11:50:13 CEST 2007

Guten Tag

Ist zwar nicht direkt Typo3 Topic, aber ich denke, hier hat's bestimmt 
genügend CSS Profis ;-)

Ich bin ein Template am erstellen, in welchem ein grosses Hintergrundbild 
unten mittig ausgerichtet wird. Der Footer der Seite soll dann exakt dort 
drin erscheinen.
Mit anderen Worten ist also die Anforderung, dass der Body mindestens Portview 
Höhe hat und dass das Footer DIV immer schön unten ausgerichtet ist.

http://www.communitymx.com/content/article.cfm?page=2&cid=BAD95 erklärt, wie 
man mit DIV die gesamte Browserhöhe ausfüllt. Das funktioniert aber nur 
solange, als in dem DIV nicht weitere divs sind.

Wenn nun zu wenig Inhalt auf der Site ist, liegt der untere Bildrand in 
Mozilla mitten in der Seite. In Konqueror liegt das Bild zwar an der 
Browserunterkante, aber der Footer mitten in der Seite.
Wenn ich den Footer nun position:absolute mach, ist der Footer in Konqueror 
zwar am unteren Rand, aber das Bild stimmt nicht mehr überein.

Hier die grobe Struktur:

<body>
  <div id="container">
    <div id="header">...</div>
    <div id="sub-container">
      <div id="main-column">...</div>
      <div id="left-column">...</div>
      <div id="right-column">...</div>
    </div>
    <div id="footer"></div>
  </div>
</body>

und Teile des entsprechenden CSS dazu:

body {
	background: #000518 url(images/background.jpg) repeat-x;
	background-position: center bottom;
	margin: 0px;
	padding: 0px;
	height:100%;
}

#container {
	width: 100%;
	min-height:100%;
}

#footer {
	width: 100%;
	height: 65px;
	/*position: absolute;*/
	bottom: 5px;
	margin-bottom:0px;
	vertical-align: bottom;
}

vielen Dank für tips

mfg chris