<div> height bis ganz unten?

[bubu-der-uhu]

Hallo!

Hab meine Seite so Aufgebaut:

<div id="header">Blabla; menu;usw.</div>
<div id="content">Blabla;usw.</div>
<div id="footer">Blabla;usw.</div>

Zentriert werden die Divs mit margin: 0px auto;

Nun möchte Ich, falls im "content" so wenig information steht (wodurch dieser nicht höher als der Browser ist), dass der div trotzdem bis zum unterem Browserrand geht - also nicht irgendwo in der mitte aufhört.

also alle 3 Divs übereinander = mindestens Browserhöhe.

Ich hab mir nun gedacht dies über height: **% zu machen, aber irgendwie fressen mir das die Browser nicht.

Css:

#header {
width:990px;
border-left:0px solid #FFFFFF;
border-top:0px solid #FFFFFF;
height:118px;
background-image:url(grafik/banner.jpg);
margin: 0px auto;
}

#content{
min-height: 100%;
overflow:hidden;
width: 990px;
padding: 0px;
text-align:left;
margin: 0px auto;
background-color:#FFFFFF;
}

#footer{
height:64px; 
width: 990px; 
text-align: left; 
padding-top: 5px; 
font-weight: 800; 
color: #000000; 
background-image:url(grafik/banner-bottom.jpg); 
border-left: 0px solid #FFFFFF; 
margin: 0px auto;
}

das "overflow: hidden" hab Ich drinnen weil mir der Inhalt im "content-div" im Firefox über den unteren Rand hinausläuft - bzw. Firefox macht mir die div-höhe: 0px;

kann mir jemand von euch Profis helfen?

Danke schon mal im Vorraus - Bubu

[bubu-der-uhu]

OK leute... nach ewigem herumspielen hab Ichs nun doch geschafft:

"content" und "footer" ins header <div> gepackt:

<div id="header">
<div id="content"> </div>
<div id="footer"> </div>
</div>

mit folgenden Css-sheet:

#header {
position:relative;
text-align:left;
width:990px;
border-left:0px solid #FFFFFF;
border-top:0px solid #FFFFFF;
height:100%;
background-image:url(grafik/banner.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
margin: 0px auto;
}

#content{
overflow:hidden;
width: 990px;
padding: 5px 0px 70px 0px;
text-align:left;
margin: 0px auto;
}

#footer{
position:absolute;
bottom: 0px;
height:64px; 
width: 990px; 
text-align: left; 
padding-top: 5px; 
font-weight: 800; 
color: #000000; 
background-image:url(grafik/banner-bottom.jpg); 
border-left: 0px solid #FFFFFF; 
margin: 0px auto;
}

jetzt muss ich nurmeh ne Css-Browserweiche einbaun damit Firefox den content nicht ganz oben über meine Header-grafik schiebt.

bye, Bubu

[bubu-der-uhu]

Verdammt!!!!!

So gehts nur im IE!

Wenn der Content im Firefox zu lang ist (länger als Browsergrösse) dann macht er den Footer über dem Content

Ich könnt heulen :sad: !!!

[dkdenz]

jetzt muss ich nurmeh ne Css-Browserweiche einbaun damit Firefox den content nicht ganz oben über meine Header-grafik schiebt.

bye, Bubu

Wenn dem so ist, dann hast Du offensichtlich etwas grundlegendes falsch gemacht.
Der Firefox ist der Browser mit der besten CSS-Umsetzung die ich kenne.
Und wenn der etwas mokiert, dann wäre Dein Konstrukt reif dafür, es nochmals zu überdenken.
Zudem ist das Mischen von px und % nicht nur im Firefox problematisch...

[bubu-der-uhu]

Ja, da hast du wahrscheinlich recht.

der Grund warum Ich height: 100% nehme ist folgender:

links und rechts: body hintergrund: z.B.: grau
in der Mitte die eigentliche Seite. Hintergrund: weiß.
Header Grafik oben: 120px Höhe - weshalb Ich den Content Div 120 px nach unten schieben muss.
Grafik am Ende der Seite: 60px;
dazwischen soll die Information stehen (content div)

Ich hab mich ewig mit positions: absolute; relativ, etc. herumgespielt
wodurchs der Firefox zwar "richtig macht" mir das Ergebniss des IE aber besser gefällt :whacky: .

Mit Browserweichen und Co hab Ichs aber nun hingetüftelt, dass beide mein gewünschtes Ergebniss zeigen:

#header {
position:relative;
text-align:left;
width:990px;
border-left:0px solid #FFFFFF;
border-top:0px solid #FFFFFF;
height:100%;
background-image:url(grafik/banner.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
margin: 0px auto;
}

#content{
position:relative;
top: 120px !important;
top: 0px;
overflow:hidden;
width: 990px;
padding: 0px 0px 70px 0px;
text-align:left;
margin: 0px auto;
background-color:#FFFFFF;
}

#footer{
position:absolute;
bottom: -76px !important;
bottom: 0px;
height:64px; 
width: 990px; 
text-align: left; 
padding-top: 5px; 
font-weight: 800; 
color: #000000; 
background-image:url(grafik/banner-bottom.jpg); 
border-left: 0px solid #FFFFFF; 
margin: 0px auto;
}

Es ist vielleicht nicht die schönste Lösung - aber Sie funktioniert: Für erleuchtende "schönere" Vorschläge bin Ich natürlich gerne offen!

*EDIT:

Scheisse... funktioniert natürlich nicht !!!!!!

bye, Bubu

[Skittles]

#header {
position:relative;
text-align:left;
width:990px;
border-left:0px solid #FFFFFF;
border-top:0px solid #FFFFFF;
min-height:100%;
height:auto !important;
height:100%;
background-image:url(grafik/banner.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
margin: 0px auto;
}

wenn du da dann die anderen boxen reinpackst, solltes es gehen