height 100% für einen DIV im FF un IE
Bobby
- css
0 Engin
Moin
Im folgenden Code versuche ich den DIV "#container" dazu zu bewegen 100% Höhe vom Elternelement anzunehmen. Das Elternelment "hg_bottom" erstreckt sich auf die Höhe vom Body. Warum erstreckt sich der DIV "#container" nicht? Seht Ihr einen Fehler?
CSS:
##########################
html, body
{
background: url("../images/hg_body.gif") repeat-x top #F2EFE4;
width:100%;
height:100%;
margin:0px;
padding:0px;
font-family:arial;
font-size:12px;
text-align:center;
color:#000;
position:relative;
}
#hg_bottom
{
text-align:center;
width:100%;
min-height:100%;
background: url("../images/hg_body_bottom.gif") repeat-x bottom ;
}
#container
{
background:url("../images/hg_container.gif") 50px repeat-y;
position:relative;
text-align:center;
width:779px;
margin:auto;
min-height:100%;
}
#top
{
background:url("../images/top.gif") 20px 20px no-repeat;
width:779px;
height:141px;
}
HTML
############################################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
irgendein Titel
</title>
</head>
<body>
<div id="hg_bottom">
<div id="container">
<div id="top">
irgend ein Inhalt
</div>
</div>
</div>
</body>
</html>
Kann mir jemand helfen?
Gruß Bobby
Hi Bobby,
Das Elternelment "hg_bottom" erstreckt sich auf die Höhe vom Body. Warum erstreckt sich der DIV "#container" nicht? Seht Ihr einen Fehler?
#hg_bottom
{
min-height:100%;
}
#container
{
min-height:100%;
}
Die Browser scheinen mit den Angaben min-height nichts anfangen zu können, wenn du sie auf 100% haben möchtest.
Probier mal ohne diese Angaben, hg_bottom muss auf jedenfall ohne min-height auskommen,
für den #container musst du wohl tricksen, damit es auch der IE schnallt.
Grüße aus H im R,
Engin