How to make a scrollable element fill 100% of the remaining height of a parent element?

Question

I have a container div that is a fixed height. It has some content and another child element. I would like the child element to scroll when it has filled the remaining heigh

Answer 1

Here is an experimental CSS possibility note - i made the height and width of the container wider to see it more clearly.

 #container {
      height: 200px;
      width: 200px;
      border: solid;
    overflow: auto;
  }
  #titlebar {
      background: gray;
  }
  #body {
      height:calc(100% - 4em); /* definitely non standard - the 4 em is an approximate size of the titlebar*/
      overflow: auto;
      background: lightblue;
  }

/*Old answer - disregard */

/*#container {
    height: 100px;
    width: 100px;
    border: solid;
    overflow:auto;   /* overflow belongs here *//*
}
#titlebar {
    background: gray;
}
#app-body {

    background: lightblue;
}*/

Answer 2

Are you looking for this: Fiddle

I think this is only possible if you set the height of #body. Else it just flows, overflow: scroll on it or overflow: hidden on #container has no effect. And to set its height, you have to know/set the height of #titlebar.

I think jQuery can solve this height problem easily.

CSS

#container {
    height: 250px;
    border: solid;
    /*overflow: hidden*/ /* <-- not really needed if height of sub-elements*/
                         /* is <= child of container */
}
#titlebar {
    height: 60px;
    background: gray;
}
#body {
    height: 190px;
    overflow-y: scroll;
}

EDIT

I think making a block element the height remaining is not possible by just CSS as elements take as much height they need and not as much height available, unless specified.

If you can use script, see this fiddle

jQuery

var $body = $('div#body');
var h = $body.parent('div').height()
        - $body.siblings('div#titlebar').height();
$body.height(h);

CSS

#container {
    height: 250px;
    border: solid;
    overflow: hidden
}
#titlebar {
    background: gray;
}
#body {
    overflow-y: scroll;
}

Answer 3

Display:table could be usefull:
Demo http://jsfiddle.net/GCyrillus/Vedkw/1
Firefox dislike it, child from display:table-row, behaves like table-cell, logic

html, body {height:100%;width:100%;margin:0;}
#container {display:table;height:100%;width:100%;}
#titlebar, #body {display:table-row;height:100%;}
/* overwrite height of titlebar */
#titlebar{height:auto;}

EDIT: digg a little please, THIS is a basic layout and you can use it.b
Inner content of #body can scroll .