nicht angemeldet
6 verschachtelte div; 3 davon 100% hoch?
Hallo,
ich versuche mich gerade an CSS für Fortgeschrittene...;)
Was ich habe sind eigentlich 3 Bereiche: oben, mitte, unten. Unten teilt sich auf in navi und Content.
Ich möchte dass oben und mitte eine bestimmte Höhe bekommen und sich der untere Bereich dann die restliche Höhe nimmt! Ich bekomme es irgendwie leider nicht hin.
Hier meine Testseite:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body {
height:100%
}
body {
z-index: 1;
font-size : 100.01%;
font-family: Arial, Helvetica, sans-serif;
background-position:250px 525px;
margin:0px;
width:100%;
}
#container {
float:left;
overflow:auto; /* Aufgrund des Floatens der Innencontainer */
min-height:100%;
}
#logo {
background-color:#ffffff;
height: 125px;
width:100%;
}
#top {
z-index: 0;
background-color:red;
height: 125px;
width:100%;
}
#frame {
background-color:green;
width:100%;
min-height:100%;
overflow:auto; /* Aufgrund des Floatens der Innencontainer */
}
#navi {
float:left;
padding:10px;
width:130px;
min-height:100%;
overflow:auto;
}
#content {
float:left;
padding:10px;
width:330px;
min-height:100%;
overflow:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">flad-logo</div>
<div id="top">top</div>
<div id="frame">
<div id="navi">navi</div>
<div id="content">content</div>
</div>
</div>
</body>
</html>