How to make the height of two side-by-side elements extend to the remaining browser height?
- by LedZeppelin
In this example, http://jsfiddle.net/mnXH9/, the height of the content-display element and the height of the nav-menu-container are fixed.
How do I make the height of the content-display and nav-menu-container elements extend to the remaining height of the browser window as the browser height is being adjusted by a user provided the height in the browser window is greater than 400px (The height of the header plus the nav-menu-container)?
I would like for the scrollbar to be inside the nav-menu-content element if the total height in the browser is greater than the sum of the height of the header (100px) and the nav-menu-container element (300px).
If the browser window's height is less than 400px then a scrollbar would appear in the browser window to allow scrolling throughout the 100px header and the 300px min-height of the below elements.
EDIT
Attached are photoshopped mockups of what the jsfiddle should look like.
tab 1 when the browser height is less than 400px
tab 1 when the browser height is greater than 400px
tab 2 when the browser height is less than 400px
tab 2 when the browser height is greater than 400px
