Div variabel über gesamte Höhe?
Sandra
- css
0 Engin
Hallo,
habe schon im Forum gesucht, aber noch keine richtige Lösung für mein Problem gefunden.
Am einfachsten ist es an einem Beispiel zu erklären, dass ich mal online gestellt habe:
http://de.geocities.com/sams.testspace/index.html
bzw.
http://de.geocities.com/sams.testspace/index_content.html
Der linke Bereich soll die Navigation werden und der rechte Bereich der Content.
Das Navigationsdiv fängt erst unterhalb des Kopfes an und wenn ich der Navi 100% gebe, dann ist sie natürlich höher, als die eigentliche Fensterhöhe... ist auch verständlich für mich. Gibt's eine Möglichkeit die Navi immer bis zum Boden zu bekommen? Auch abhängig davon wie viel im Content steht? Im Moment (mit height 100%) ist die Navi ja immer 100% von der Browsergröße egal ob gar nichts im Content steht oder der Contentbereich noch tiefer geht.
Hoffe Ihr versteht was ich meine und könnt mir weiterhelfen.
Besten Dank schon mal.
Gruß
Sandra
Hier ist mal mein Code von der HTML-Datei:
<body>
<div id="head"></div>
<div id="hauptnavi"></div>
<div id="content"></div>
</body>
Und der von der CSS-Datei:
body, html {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
height:100%;
min-height:100%;
}
#head {
background-color:#CC66FF;
height:100px;
}
#hauptnavi {
background-color:#CCCCCC;
width:170px;
height:auto;
min-height:100%;
height:100%;
position:absolute;
}
#content {
background-color:#FFFFFF;
width:780px;
height:auto;
position:absolute;
margin-left:200px;
margin-top:20px;
border-bottom-style:solid;
border-width:2px;
}
Hi Sandra,
http://de.geocities.com/sams.testspace/index.html
bzw.
http://de.geocities.com/sams.testspace/index_content.htmlDer linke Bereich soll die Navigation werden und der rechte Bereich der Content.
Das Navigationsdiv fängt erst unterhalb des Kopfes an und wenn ich der Navi 100% gebe, dann ist sie natürlich höher, als die eigentliche Fensterhöhe...
Hast du dir schon das Kapitel zu absolut positionierten Elementen durchgelesen?
Für dein anliegen würde sich float wohl besser eignen.
Um dann dein Ziel zu erreichen, müsstest du noch die wunderwaffe-overflow abfeuern, den IE 6 das ganze gehörig machen, Fertig.
Habs grade bei mir getestet, zumindest im FF 2.0.0.8 und IE 7 sieht es ganz akzeptabel aus.
Hoffe Ihr versteht was ich meine und könnt mir weiterhelfen.
Es geht :)
#hauptnavi {
height:auto;
min-height:100%;
height:100%;
}
Bei den height angaben solltest du dich schon entscheiden, was du denn
nun möchtest. :)
Ich könnte jetzt auch mein bsp. verlinken, möchte dir allerdings den Spaß
am lernen nicht verderben. :)
Grüße,
Engin
GYRO