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;
}