Question

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

EDIT

tab 2 of http://jsfiddle.net/mnXH9/25/show/

Answer 1

EDIT–switched fiddle versions to one working better based off comments and noted IE8.

View a full screen version here (view css here). This uses @media queries and some other CSS3, so it will not work on older browsers, but I believe it does exactly what you requested. I reset the two columns to be position: absolute to achieve this. Some javascript to check for height could be used to fix older browsers if necessary.

IE8 (if you care) needs to also have the overflow: auto set on the #tabs (I removed it from that to the .panel inside for better effects on other browsers).