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

Question

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

如果浏览器高度由用户调整，我如何使content-display和nav-menu-container元素的高度扩展到浏览器窗口的剩余高度，前提是浏览器窗口中的高度为大于400px（标题的高度加上nav-menu-container）？

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

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

修改

附上了jsfiddle应该是什么样子的模型。

当浏览器高度小于400px

时，

标签1

当浏览器高度大于400px

时，

标签1

当浏览器高度小于400px

时，

选项卡2

当浏览器高度大于400px

时，

选项卡2

修改

<{3}}

的

标签2

Answer 1

编辑 - 根据评论切换小提琴版本为一个更好的工作，并注意到IE8。

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

IE8（如果你关心的话）还需要在overflow: auto上设置#tabs（我将其从.panel内部删除，以便更好地影响其他浏览器。）< / p>

Answer 2

您可以使用faux columns来完成标签容器上的等效高度和右侧导航 - 比使用手动高度设置进行模拟更简单。这也会使它们看起来扩展到整个浏览器的高度。

Answer 3

<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {margin:auto; height:100%; width: 500px;}
#header {top:0px;background-color: pink; height:100px; border-bottom: none; z-index:50}
#content-display {position:relative; width: 300px; height:100%; float: left; z-index:-1;}
#nav-menu-container {position:relative; bottom:43px;padding-top:50px;left:300px; width:200px; height:100%; background:lightblue; z-index:-1;}
#nav-menu-content { width: 100px; margin-left:50px; margin-top:43px;height:300px; background:greenyellow;}
#tabs ul li a {font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 13px;} /*Tab title text*/
#tabs {height:100%;}
.panel{height:218px; overflow: auto;}
</style>