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

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

Answer 2

I came across this question while looking for an answer to a similar question, and I thought I'd illustrate calc. As of this post, calc is not yet supported cross-browser; however, you can check this link here to see if your target browsers are supported. I've modified matt's hypothetical case to use calc in an example on jsFiddle. Essentially it is a pure CSS solution that does what casablanca proposes in his answer. For example, if a browser supports calc, then height: calc(100% - 200px); would be valid as well as for similar properties.

Answer 3

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 4

I propose the table-element as an alternative:

• +: clean CSS
• +: avoiding javascript
• -: table semantically misused
• -: not the requested div-elements

Answer 5

you can do this with nested div tags. you have one specifying the width on the left, and then another left blank. To fill the rest of the other side you nest a 100% relative div inside the right side div. like so:

<div style="width:100%">
  <div style="width:300px;background-color:#FFFF00;float:left">
  </div>
  <div style="margin-left:300px">
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF">
    </div>
  </div>
</div>

Answer 6

Try

height: 100%;

or

height: auto;