CSS: Div with height:100% is pushed down by his brothers div

Question

I have in one div three other children divs placed one above the other. The third one is a JqueryMobile listview that needs overflow-y: scroll to make only the listview scrollable without need to scroll all the page.
The problem is that if I set the height of the listview to 100% , this will set its height to the same of the parent without calculating that there are two other divs that occupy space and so it will go out the limit of the page so that some rows will not be displayed.

How can I tell the listview to fill the parent without overflowing the page ?

==Edit==

This is the fiddle http://jsfiddle.net/q4Mwz/3/
As you can see the height of the div listview is setted to 100% and you cannot see the last li "Last Element" bacause they have overflowed the page

Answer 1

If you want two div s to sit about div.listview and you want them to collectively fill the height of the parent div.noscroll , then naturally giving div.listview a height of 100% is going to overflow the parent.

If what you want is to have div.listview fill the rest of the parent's height, one solution would be to give the first two divs a height of 10% and then give div.listview a height of 80%.

Answer 2

I resolved with a simple jQuery script that take the height of the page and subtract the heights of the others elements:

    var h = $('#page').outerHeight(true) - $('#combo').outerHeight(true) - $('#header').outerHeight(true) -15;
    $('#listview_height').height(h);