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?

Twopiece

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

Elijah

do you know the javascript way? – Twopiece

Careful of flickering. This did not work well at all for creating an inset shadow. – Gunpowder

100% - 200px is possible with the calc CSS value. – Bascio

Wouldn't height: 100%; margin-bottom: 200px; do it? – Lark

@RobW: Or rather, will be possible on desktops when enough people stop using Windows XP (or enough XP users switch to Chrome or Firefox), as IE8 doesn't support it and that's the max IE for XP. IE8 and below account for ~30% of global web users at present (more like ~23% if you don't have to support China, but that's still nearly a quarter of potential visitors). Going to be a long wait, particularly for all those corporates who have the right to use XP until the EOL of Windows 7 as part of their volume license. :-) – Bronk

@RobW that should really be its own answer +1 – Redevelop

@RobW its not just IE8 also some android browsers don't support it caniuse.com/#feat=calc – Evidential

Answer 2

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

Dauntless

A good demonstration of this is available at blog.stevensanderson.com/2011/10/05/…. This technique even works in IE7. – Polaroid

@ChristianNilsson fiddle doesn't work as expected in FF 49.0.2 – Sowens

Answer 3

I propose the table-element as an alternative:

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

Ernie

Answer 4

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.

Frenchy

Answer 5

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.

Laubin

Answer 6

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>

Berny

Answer 7

Try

height: 100%;

or

height: auto;

Professed

100% will overshoot the height of the sidebar because there are already 2 other divs. – Elijah

already tried! doesn't work. if i set "100%" the div#rest gets the 100% from the entire page. so that means it's a lot longer than the actual sidebar itself. with "auto" happens nothing. – Twopiece

I'm not 100% sure but when you set "auto" you may need to change the "position" attribute. I'm in no way a CSS expert but I seen to remember that "auto" behaved differently for each type of position. – Professed