css - 如何让并排的两个元素的高度延伸到浏览器的剩余高度？

Question

在这个例子中，http://jsfiddle.net/mnXH9/ , content-display 元素的高度和 nav-menu-container 的高度是固定的。

如何使 content-display 和 nav-menu-container 元素的高度随着浏览器高度的变化而延伸到浏览器窗口的剩余高度如果浏览器窗口中的高度大于 400 像素(标题加上导航菜单容器的高度)，是否由用户调整？

如果浏览器中的总高度大于标题高度 (100px) 和 元素的总高度，我希望滚动条位于 nav-menu-content 元素内code>nav-menu-container 元素(300 像素)。

如果浏览器窗口的高度小于 400 像素，则浏览器窗口中会出现一个滚动条，以允许滚动整个 100 像素的标题和下方元素的 300 像素最小高度。

编辑

附件是 jsfiddle 应该是什么样子的 Photoshop 模型。

浏览器高度小于400px时tab 1

浏览器高度大于400px时tab 1

浏览器高度小于400px时tab 2

浏览器高度大于400px时tab 2

编辑

http://jsfiddle.net/mnXH9/25/show/ 的选项卡 2|

Answer 1

编辑——根据评论将 fiddle 版本切换到一个工作更好的版本，并指出 IE8。

View a full screen version here (view css here)。这使用 @media 查询和一些其他 CSS3，因此它不能在旧浏览器上运行，但我相信它完全符合您的要求。我将两列重置为 position: absolute 以实现此目的。如有必要，可以使用一些用于检查高度的 javascript 来修复旧版浏览器。

IE8(如果你关心的话)还需要在 #tabs 上设置 overflow: auto(我把它从那里删除到 .panel 在其他浏览器上效果更好)。