带有页眉/页脚和可滚动内容的HTML/CSS边栏

我基本上是在尝试创建一个边栏，它是容器中的完整浏览器高度（完成）。侧边栏有一个页眉和页脚，页脚始终固定在浏览器的底部。这些内容之间的大小可以灵活

我举了一个例子，如果内容没有超过高度，它就可以工作：

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

剖面面积

列表项
列表项
列表项
列表项
列表项

页脚区域
内容区

但是，如果我开始添加更多内容，我希望列表停止向下推页面（不管它有多高），并形成一个滚动条

Soundclouds边栏就是一个很好的例子：

因此，基本上，当它变得太大时，以下是列表：

---

如何将内容/列表设置为页眉和页脚之间剩余内容的高度，并将多余内容变成一个滚动条。

将侧边栏div css设置为

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

因此，当它达到您想要的高度时，它将添加滚动条。在设置div的宽度时，一定要考虑滚动条的附加宽度

如果需要动态设置div的最大高度，请使用javascript

给你

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

正文，html{
身高：100%；
}
.标题{
高度：40px；
宽度：100%；
}
.页脚{
高度：40px；
宽度：100%；
位置：绝对位置；
底部：0；
}
.内容{
位置：绝对位置；
宽度：100%；
顶部：40px；
底部：40px；
溢出y：自动；
}
轮廓
内容
页脚

---

啊，太棒了，谢谢，我没想过那样做：D