带有页眉/页脚和全高可滚动内容的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。