html - 创建可滚动元素并设置大小以匹配窗口

Question

我有一个带有标题的页面，然后是左侧的侧栏和右侧的主要内容区域。我希望右侧的主要内容区域独立于左侧的侧栏滚动。

-----------------------------------
| Header                          |
|---------------------------------|
|         |                       |
|         |                       |
| Left    | Main                  |
| Sidebar | Content               |
|         |                       |
|         |                       |
-----------------------------------

我知道我可以用 设置主要内容的样式{ height: 500px; overflow-y: auto; }，但是我设置的高度并不总是与窗口的剩余高度相匹配。

有没有办法做到这一点，让我的主要内容像往常一样用完所有可用的窗口空间？

Answer 1

您可以使用绝对定位来实现，请参见：http: //jsfiddle.net/KpJgd/

#content{
    position:absolute;
    top:200px;
    right:0;
    bottom:0; /*this is the trick where the <div> goes til the bottom of the window*/
    width:70%;    
    overflow:auto;
    background-color:#008800;        
}

请注意，您必须在 CSS 中指定：

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}