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

Question

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

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

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

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 时，如何使 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

Answer 2

什么对我有用：

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

Answer 3

我将可滚动的 div 更改为具有绝对位置，一切都适合我

div.sidebar {
    overflow: hidden;
    background-color: green;
    padding: 5px;
    position: fixed;
    right: 20px;
    width: 40%;
    top: 30px;
    padding: 20px;
    bottom: 30%;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    height: 30px;
}

div#scrollable {
    overflow-y: scroll;
    background: lightblue;

    position: absolute;
    top:55px; 
    left:20px;
    right:20px;
    bottom:10px;
}

DEMO with two scrollable divs

Answer 4

实际上这是更好的方法。如果使用height: 100%，则内容会超出边界，但如果使用95%，则一切正常：

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

Answer 5

将可滚动的 div 设置为具有 max-size 并将 overflow-y: scroll; 添加到它的属性中。

编辑：试图让 jsfiddle 工作，但它不能正确滚动。这需要一些时间才能弄清楚。