CSS: height- fill out rest of div?

Question

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 1

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

Answer 2

What you want is something like 100% - 200px but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the divs use percentage heights, so you could have something like 10%-10%-80%.

Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:

function resize() {   // 200 is the total height of the other 2 divs   var height = document.getElementById('sidebar').offsetHeight - 200;   document.getElementById('rest').style.height = height + 'px'; };