Question

I have a middle container that takes up whatever vertical space is left on the screen. In it, I placed a Jquery scroller that is currently set to 200px:

.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}

However, if I set .scroll-pane height to 100%, it just removes the scrollbar and stretches the whole page.

See JsFiddle here

How can I stop this? Thanks!

Answer 1

Here is my solution to this problem (jsfiddle). It uses markup like this:

<div id="top">...</div>
<div id="wrapper">
    <div id="middle">...</div>
</div>
<div id="bottom">...</div>

The top and bottom divs are position absolutely at the top and bottom, with a width of 100%. The wrapper div has height: 100%, box-sizing: border-box, and top and bottom padding equal to the height of the top and bottom divs, respectively. This causes it to fill the viewport but have padding underneath the top and bottom divs. The middle div has a height of 100% so it fills the content box of the wrapper (i.e., 100% minus the top and bottom paddings). It has position: relative, which leaves you free to use height: 100% on both interior boxes.

Lastly, middleleft is positioned absolutely and middleright has a left margin equal to its width, which causes it to fill the remaining horizontal space.