nicht angemeldet
Problems defining hight
Hallo Leute
Ich habe ein etwas trickreiches problem mit HTML/CSS.
Ich habe einen div catalogueFavorit, welcher jeweils 40% der verfügbaren Höhe des bodys einnimt.
In dieser befindet sich ein div rounded (ich hab die border-radius properties noch nicht gesetzt) und nimmt 100% der höhe ein, ist im endeffekt also variabel (hängt von der Höhe des Bodys ab)
Innerhalb dieses div rounded sind 2 weitere divs platziert.
Der title-div besitzt eine feste höhe von 25 pixeln (20 height + 5 padding-top)
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel. (Der inhalt von content muss scrollable sein, da der Inhalt dynamisch grösser und kleiner wird)
Mein Problem ist, dass ich keine Ahnung habe, wie ich das erreichen kann. Ist es überhaupt möglich?
Unterhalb noch die notwendigen HTML und CSS codes, die in diesem Zusammenhang stehen.
Schon mal danke im Voraus
Greez
crazy_crank
<div class="catalogueFavorit">
<div class="rounded">
<div class="title">Kataloge</div>
<div class="content scrollY">
Growable content
</div>
</div>
</div>
DIV.catalogueFavorit {
height: 40%;
}
DIV.rounded
{
border:1px solid #8B8B8B;
height: 100%;
}
DIV.rounded DIV.title
{
background-color:#DEDEDE;
border-bottom:1px solid #C6C6C6;
font-size:0.75em;
height: 20px;
vertical-align: middle;
padding-left: 5px;
padding-top: 5px;
}
DIV.rounded DIV.content
{
padding: 0 10px 0;
height: 100%;
}
DIV.rounded DIV.content > *
{
margin-top: 10px;
}
DIV.rounded DIV.scrollY
{
overflow-x: hidden;
overflow-y: scroll;
}
-
Der title-div besitzt eine feste höhe von 25 pixeln (20 height + 5 padding-top)
<hx> kennst du?
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel. (Der inhalt von content muss scrollable sein, da der Inhalt dynamisch grösser und kleiner wird)
Mein Problem ist, dass ich keine Ahnung habe, wie ich das erreichen kann. Ist es überhaupt möglich?Wenn also der Inhalt deiner "rounded" class grösser als dessen Platz ist, dann soll ein Scrollbalken dort erscheinen.
Ja das ist möglich. Du weisst es.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Der title-div besitzt eine feste höhe von 25 pixeln (20 height + 5 padding-top)
<hx> kennst du?
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel. (Der inhalt von content muss scrollable sein, da der Inhalt dynamisch grösser und kleiner wird)
Mein Problem ist, dass ich keine Ahnung habe, wie ich das erreichen kann. Ist es überhaupt möglich?Wenn also der Inhalt deiner "rounded" class grösser als dessen Platz ist, dann soll ein Scrollbalken dort erscheinen.
Ja das ist möglich. Du weisst es.
mfg Beat
Ne echt jetzt, hast du gelesen was ich geschrieben habe?
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel.
Darum geht es, scrollable ist der inhalt schon, klammern sind übrigens für nebensächliche zusatzbemerkungen da... hast du mein css angeschaut? overflox: scroll steht dort -.-
Der content div, unterhalb des title-div, soll den gesamt restlichen Platz des container-div einnehmen. Da der title-div eine höhe von 25 px hat, wären dies bei einer gesamthöhe von 100 px noch 75 für den Content. Ich weiss allerdings nicht, wie gross der container insgesamt ist.
Ist es möglich, dass der Content-div immer exakt die restlichen 100% - 25 pixeln einnimmt. Ohne CSS3, ohne Javascript, einfach rein mit HTML und CSS2.1-
Der title-div besitzt eine feste höhe von 25 pixeln (20 height + 5 padding-top)
<hx> kennst du?
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel. (Der inhalt von content muss scrollable sein, da der Inhalt dynamisch grösser und kleiner wird)
Mein Problem ist, dass ich keine Ahnung habe, wie ich das erreichen kann. Ist es überhaupt möglich?Wenn also der Inhalt deiner "rounded" class grösser als dessen Platz ist, dann soll ein Scrollbalken dort erscheinen.
Ja das ist möglich. Du weisst es.
mfg Beat
Ne echt jetzt, hast du gelesen was ich geschrieben habe?
Hast du begriffen, was ich dir vorgeschlagen habe?
Ich sehe keinen Grund, warum der Scrollbar NICHT dort erscheinen soll, wo er sinnvoll ist: beim parent-Element, wodurch sich dein Problem erledigt hat.Gibt es einen Grund, warum diese Lösung nicht machbar ist?
Der zweite div, content, soll immer die gesamte restliche höhe übernehmen, die innerhalb von rounded übrig bleibt. also theoretisch 100% - 25 pixel.
Da eine solche Rechnung in CSS allgemein nicht möglich ist, wirst du zu absoluter positionierung und definierung der Grösse durch die vier Werte top, bottom, left, right greifen müssen.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-