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

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;
}