css - 滚动固定位置容器中的部分内容

Question

我在布局中有一个 position: fixed div，作为侧边栏。我被要求将它的一部分内容固定在它的顶部(内部)，而其余部分则滚动如果它溢出 div 的底部。

我看过this answer ，但是那里提供的解决方案不适用于 position: fixed 或 position: absolute 容器，这很痛苦。

我已经对我的问题进行了 JSFiddle 演示 here .理想情况下，大量文本应该滚动，而不是溢出到页面底部。页眉的高度可以随内容而变化，并且可以是动画的。

body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
}

div#scrollable {
    overlow-y: scroll;
}

<div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

没有固定的标题，我可以简单地添加 overflow-y: scroll 到 div.sidebar 如果它溢出底部我可以愉快地滚动它的所有内容容器。但是，我遇到了问题，在边栏顶部有一个固定的、可变高度的标题，如果内容太长而无法放入容器，则在该滚动条下方有任何内容。

div.sidebar 必须保持position: fixed，我非常想在没有任何技巧的情况下做到这一点，并且它尽可能跨浏览器。我尝试了各种方法，但都没有用，而且我不确定从这里开始尝试什么。

如何使 position: fixed 容器内的 div 在其内容溢出包含 div 时仅在 Y 方向滚动，并具有可变的、不确定高度的固定标题？我非常想远离 JS，但如果我必须使用它，我会的。

Answer 1

如果你使用它似乎有效

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

并将padding-bottom: 60px添加到div.sidebar。

例如:http://jsfiddle.net/AKL35/6/

但是，我不确定为什么它必须是 60px。

此外，您还错过了 overflow-y: scroll;

中的 f