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。

带有页眉/页脚的HTML / CSS SIdebar和全高度的可滚动内容

2 个答案: