帶有頁眉/頁腳和全高可滾動內容的HTML/CSS SIdebar

Question

我基本上試圖創建一個側欄，它是一個容器內的完整瀏覽器高度（完成）。側邊欄有一個頁眉和頁腳，頁腳始終粘在瀏覽器的底部。這些內容之間的內容可以是靈活的。

我如果內容不走過去的高度工作的例子：

<div class="container"> 

    <div class="sidebar"> 
     <div class="profile"> 
      Profile Area 
     </div> 

     <ul class="list"> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 

     <div class="foot"> 
      Footer area 
     </div> 
    </div> 

    <div class="main"> 
     Content Area 
    </div> 

</div> 

http://jsfiddle.net/w26cm/2/

但是，如果我開始添加更多的內容，我想名單停止將頁面向下推（無論高度如何）並形成滾動條。

這

工作示例是Soundclouds側邊欄：https://soundcloud.com/

所以基本上這裏是列表時，它變得太大：http://jsfiddle.net/w26cm/4/

我應該如何設置內容/列表只能高度在頁眉和頁腳之間留下了什麼，多餘的東西變成了一個滾動條。

Answer 1

你在這裏...

<style> 
body,html { 
height:100%; 
} 
.header { 
height:40px; 
    width:100%; 
} 
.footer { 
height:40px; 
width:100%; 
    position:absolute; 
    bottom:0; 
} 
.content { 
position:absolute; 
    width:100%; 
top:40px; 
bottom:40px; 
    overflow-y:auto; 
} 
</style> 

<div class="header"> 
    profile 
</div> 
<div class="content"> 
    content 

</div> 
<div class="footer"> 
    footer 
</div> 

http://jsfiddle.net/Ve8PL/

Answer 2

設置側邊欄DIV + CSS來

max-height://whatever height you want 
overflow:scroll; 

所以當它到達你想它會增加滾動條的高度。設置div的寬度時，請務必考慮滾動條的添加寬度。

如果您需要動態設置div的最大高度使用javascript。