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

uff.. its very difficult to understand in theoretical manner. Why can't you create a fiddle? — Ravi Dhoriya ツ, Aug 02 '14 at 14:14
This is normal behavior, since your body height is limited to 480px. You could make your body higher or your content smaller. — stekhn, Aug 02 '14 at 14:57
possible duplicate of [How to make a scrollable element fill 100% of the remaining height of a parent element?](http://stackoverflow.com/questions/16906688/how-to-make-a-scrollable-element-fill-100-of-the-remaining-height-of-a-parent-e) — ASGM, Aug 02 '14 at 14:59
@stekhn i can't make my body bigger or my content smaller because i'm working in a cordova mobile app and so it needs to be all in percentage — Matteo Cardellini, Aug 02 '14 at 15:05
you can try making all the three elements' height in percentage — gaurav5430, Aug 02 '14 at 15:50

score 0 · Answer 1 · answered Aug 02 '14 at 14:58

If you want two divs 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%.

score 0 · Accepted Answer · answered Aug 02 '14 at 15:42

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

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

2 Answers2