✔ footer plazieren

[emonem]

Hi,

ich hab mal wieder ein CSS Problem.
Ich habe auf meiner Page einen Header- (rot), einen Main- (grau) sowie einen Footercontainer (blau).
Ich möchte das sich der Footer immer am unteren Ende des Browserfensters befindet, egal wieviel Inhalt ich im main container habe.
Hier ein Pic wie es ausehen soll und wie es moment aussieht.

Meine Code:

*{
margin:0;
padding:0;
}

html,body{
width:100%;
height:100%;
}

#content{
margin:0px;
}

#header{
height:20px;
width:100%;
background:red;
}

#main{
margin:0px;
width:100%;
background:grey;
}

#footer{
margin:0px;
width:100%;
height:50px;
background:blue;
}

...

<div id="content">
<div id="header"></div>
<div id="main">
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
  <p>BlaBlaBla</p>
BlaBlaBla</div>
<div id="footer"></div>
</div>

Hoffe jemand hat eine Idee.
Gruß

 

[Maik]

Studiere hierzu mal Gumbos Lösungsbeispiel in dem Thread ... ein weiteres CSS Layout Problem .

 

[emonem]

Hi,

besten dank für den link, hat mir sehr geholfen.
Jetzt hab ich aber ein anderes Problem mit meinem Layout gekriegt. Der header und footer sind jetzt richtig im Browser plaziert aber in meinem Contentbereich hab ich eine Hintergrundgrafik welche sich komplett zwischen den header und footer per repeat-y;
ausspannen soll, unanbhängig davon wieviel text ich im meinem Content bereich habe.
Hab es mal nachskizziert.
Also so solls aussehen. -link-
Und so siehts bei mir aus: -link-
Die BgGrafik richtet sich nur so weit aus wieviel ich an text habe.

html, body {
height:100%;
}
body {
margin:0;
padding:0;
background-color:white;
}
#container {
position:relative;
min-height:100%;
height:100%;
voice-family:"\"}\"";
voice-family:inherit;
height:auto;
}
html>body #container {
height:auto;
}
#header {
height:49px;
background-color:#1dce00;
}
#headerbox{
background:URL(css/header.jpg);
width:498px;
height:49px;
margin:0 auto;
}
#main{
margin:0 auto;
width:498px;

}
#mainbox {
padding-bottom:1px;
width:498px;
background:URL(css/lines.jpg) repeat-y;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:38px;
background-color:#1dce00;
}
#footerbox{
margin:0 auto;
background:URL(css/footer.jpg);
width:498px;
height:38px;
}
...

<div id="container">
<div id="header"><div id="headerbox"></div></div>
<div id="main"><div id="mainbox">BlaBlaBlaBla<p>BlaBlaBlaBla</p>BlaBlaBlaBla<p>BlaBlaBlaBla</p></div></div>
<div id="footer"><div id="footerbox"></div></div>
</div>

Ist mein Vorhaben überhaupt möglich? Wäre über jeden Tip sehr dankbar.
Gruß

 

[Maik]

Dann probier mal diese Variante:

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

div#container {
min-height:100%;
margin:0 auto;
background:url(css/lines.jpg) repeat-y center top;
}

* html div#container { /* Für IE */
height:100%;
}

div#header {
height:49px;
background-color:#1dce00;
}

#headerbox{
background:url(css/header.jpg);
width:498px;
height:49px;
margin:0 auto;
}

div#main {
margin:0 auto;
width:498px;
}

#mainbox {
padding-bottom:38px;
}

#footer {
width:100%;
height:38px;
margin-top:-38px;
background-color:#1dce00;
}

#footerbox{
margin:0 auto;
background:url(css/footer.jpg);
width:498px;
height:38px;
}

<div id="container">
     <div id="header"><div id="headerbox">headerbox</div></div>
     <div id="main"><div id="mainbox">mainbox</div></div>
</div>
<div id="footer"><div id="footerbox">footerbox</div></div>

 

[emonem]

Super, genau danach hab ich den halben Tag gesucht, wäre ich niemals drauf gekommen.
Vielen Dank.
Gruß

 

[Maik]

Dann markiere bitte zukünftig solch gelöste Themen auch selbständig als erledigt.

 

[emonem]

Oh sorry, mußte noch paar Feinschliffe für den IE machen und habs dann total verpeilt aber werd mich nächstes mal dran halten, versprochen