将div限制在浏览器窗口的底部

Question

我有如下布局：

现在我希望将“内容”部分延伸到浏览器窗口的底部，而不是更进一步。任何溢出应由“内容”部分的滚动条处理。我尝试过的位置：固定，但似乎无法让它发挥作用。

当然，框架不是一种选择，但我不必取悦IE6（耶！）。

Answer 1

以下是一个似乎有用的示例 - http://jsfiddle.net/JQW2c/3/

<div class="toolbar">Toolbar</div>
<div class="info">info</div>
<div class="contentContainer">
    <div class="tabs">tabs</div>
    <div class="content">content</div>
</div>

body, html
{
   font-family: Arial;
   margin: 0px;
   padding: 0px; 
   height: 100%;
}

div.toolbar
{
   background-color: #EB526C;
   height: 50px;
}
div.tabs
{
   background-color: #75D17B;
   margin-right:100px; 
   height: 30px;  
}
div.info
{
   background-color: #E2F285;
   width: 100px;
   position: absolute;
   top: 50px;
   bottom: 0px;
   right: 0px;
}
div.content
{
   background-color: #7794ED;
   position: absolute;
   top: 80px;
   bottom: 0px;
   left: 0px;
   right: 100px;
   overflow: auto;
}

Answer 2

放手一搏......

`#content {height:100%; overflow:scroll;}`

Answer 3

这可能会有效，但根据您的实际设置和/或交互情况，它可能不会：）

#content { position: absolute; top: toolbarheight + tabsheight; left: 0; right: infocolumnwidth; bottom: 0; overflow: auto;}

您最有可能需要使用JS设置顶部位置值。