i wonder if this is possible with simple css or if i have to use javascript for this?
i have a sidebar on my website. a simple div#sidbar it's normally about 1024px high, but the height changes dynamically due to it's content.
so let's imaginge the following case:
<div id="sidebar">
<div class="widget"></div> //has a height of 100px
<div class="widget"></div> //has a height of 100px
<div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar
</div>
i want the div#rest to fill out the rest of the sidebar till it reaches the bottom of the div#sidebar.
is this possible with pure css?
Answer
If you know the exact height of #widget (100px in your case), you can avoid using JavaScript by using absolute positioning:
#sidebar
{
height: 100%;
width: ...;
position: relative;
}
.widget
{
height: 100px;
}
#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}