創建可滾動元素並將大小設置爲匹配窗口

Question

我有一個頁面，頭部後面跟着一個側欄和一個右側的主內容區域。我希望右側的主要內容區域能夠從左側的側欄獨立滾動。

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

我知道，我可以{ height: 500px; overflow-y: auto; }風格的主要內容，但後來我設定的高度並不總是匹配窗口的剩餘高度。

有沒有什麼辦法可以實現這一點，並讓我的主要內容像通常那樣使用所有可用的窗口空間？

Answer 1

您可以絕對positionning做到，看到有：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; 
}