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

Answer 1

Sometimes a workaround might be:

#rest {
  height: 100%;
  padding-bottom: 200px;
}

The div itself will be too high, but because of the padding its content will have the right height.

Answer 2

I propose the table-element as an alternative:

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

Answer 3

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 4

Try

height: 100%;

or

height: auto;

Answer 5

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 6

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