nicht angemeldet
div-container Höhe dynamisch anpassen
Hallo Forum,
Ich versuche zwei div-Container dessen Höhe dynamisch anzupassen. Die Höhe des einen div-Containers muss sich synchron des anderen div-Containers dynamisch anpassen. Ich weiß nicht wie ich das anstellen soll, vielleicht kann mir jemand dabei helfen?
mein Layout hat 4 div-Container(Box-Modell).
Code:
div.top {
width:900px;
height:50px;
background-color:blue;
}
div.nav {
width:148px;
float:left;
text-align:left;
background-color:blue;
border-left:1px solid black;
border-right:1px solid black;
}
div.content {
width:743px;
float:right;
margin-top:5px;
border:1px solid black;
}
div.bottom {
width:900px;
height:50px;
clear:left;
background-color:blue;
}
div.center {
width:900px;
margin:0px auto;
text-align:center;
margin-top:25px;
}
die Höhe von div.content soll sich dynamisch des Inhaltes anpassen, dass ist soweit kein Problem. Nun sollte aber auch div.nav die selbe Höhe besitzen wie div.content. Würde gerne auf JS verzichten.
Hier noch mein HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
...
<body>
<div class="center">
<div class="top"></div>
<div class="nav">button1<br>button2<br>
button3<br>button4<br>
button5<br>button6<br>
button7<br>button8<br>button9
</div>
<div class="content">
a<br>c<br>d<br>c<br>d<br>c<br>d<br>t<br>g<br>h<br>
</div>
<div class="bottom"></div>
</div>
</body>
Mein Vorhaben hat spezielle Gründe bei einem bereits bestehenden Projekt, deshalb würde es mich freuen mir davon nicht abzuraten, es sei den es ist nicht konform.
Gruß
Torsten
-
Hi,
Nun sollte aber auch div.nav die selbe Höhe besitzen wie div.content. Würde gerne auf JS verzichten.
das geht aber nicht. Du könntest lediglich einen optischen Effekt simulieren, z.B. über die Verwendung eines Hintergrundbildes.
freundliche Grüße
Ingo-
Hi Ingo,
Nun sollte aber auch div.nav die selbe Höhe besitzen wie div.content. Würde gerne auf JS verzichten.
das geht aber nicht. Du könntest lediglich einen optischen Effekt simulieren, z.B. über die Verwendung eines Hintergrundbildes.ok, hatte mir schon gedacht das ich ohne JS nicht auskommen werde, schade eigentlich. Mit einem Beispielcode wäre mir sehr geholfen, oder ein Tipp wie ich sowas angehen kann.
Gruß
Torsten-
Hi Torsten,
Mit einem Beispielcode wäre mir sehr geholfen, oder ein Tipp wie ich sowas angehen kann.
Die Höhe beider Elemte bekommst du mit:
getElementById("id").offsetHeight;vergleichst beide mit: >
und setzt die jeweils andere Höhe über:
getElementById("id").style.heightEtwa so. Wobei natürlich noch entsprechende Prüfungen auf die verwendeten Methoden/Eignschaften eingebaut werden müssen:
navi=window.document.getElementById("navi");
inhalt=window.document.getElementById("inhalt");if(inhalt.offsetHeight > navi.offsetHeight)
navi.style.height=inhalt.offsetHeight+"px";
else
...Grüße,
Jochen
-
Hi Jochen,
danke dir!
Gruß
Torsten
-
-
-
-
Hallo Torsten,
Ich versuche zwei div-Container dessen Höhe dynamisch anzupassen. Die Höhe des einen div-Containers muss sich synchron des anderen div-Containers dynamisch anpassen.
Wenn du sicherstellen kannst, dass div.content immer "höher" ist als div.nav bist du doch schon auf dem richtigen Weg. 2, 3 winzige Änderungen und es klappt.
div.nav {
width:891px;
}und den "content" mit "nav" verschachteln
<div class="nav">
<div class="content">
a<br>c<br>d<br>c<br>d<br>c<br>d<br>t<br>g<br>h<br>
</div>
button1<br>button2<br>
...
</div>HTH
Jochen
-
Hi,
Ich versuche zwei div-Container dessen Höhe dynamisch anzupassen. Die Höhe des einen div-Containers muss sich synchron des anderen div-Containers dynamisch anpassen.
Wenn du sicherstellen kannst, dass div.content immer "höher" ist als div.nav bist du doch schon auf dem richtigen Weg. 2, 3 winzige Änderungen und es klappt.
div.nav {
width:891px;
}und den "content" mit "nav" verschachteln
<div class="nav">
<div class="content">
a<br>c<br>d<br>c<br>d<br>c<br>d<br>t<br>g<br>h<br>
</div>
button1<br>button2<br>
...
</div>ne das bringt mir nix, danke aber für die Hilfe!
Gruß
Torsten
-