Scroll only inside a specific div AND make that div fill the remaining space

Question

What I want to do is basically this
But for this solution to work, I need to specify the height of the div, but the div needs to fill all the remaining height, so I found this
the issue is: each answer works separately, but both together seems to not work.
Here's what I have:

<body>
    <div id="master-page">
        <div id="some-unknown-size-content"></div>
        <div id="separator"></div>
        <div id="sub-master-page">
            <div id="more-unknown-size-content"></div>
            <div id="another-separator">
            <div id="scrollable-content-taking-remaining-space">
                <!-- content -->
            </div>
        </div>
    </div>
</body>

The master-page have an asp:placeholder which is replaced by div sub-master-page
The sub-master-page have another asp:placeholder which is replaced by div scrollable-content

Basically what you are looking is dynamic height can only be achieve with jQuery or javascript — Shehary, Aug 17 '15 at 13:35

score 1 · Accepted Answer · answered Aug 17 '15 at 13:55

I don't know if i understood your question correctly or not.

You can use following jquery code to calculate and assign remaining space

var remaining_space = $('#master-page').height() - $('#some-unknown-size-content').height()-$('#more-unknown-size-content').height()-$('#separator').height();
$('#scrollable-content-taking-remaining-space').css('height',remaining_space+'px');

you can go to following link to see it in action:

https://jsfiddle.net/fq7bgo4w/

Scroll only inside a specific div AND make that div fill the remaining space

1 Answers1