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

Question

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

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

我在这里做了一个 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，我非常希望在没有任何黑客攻击的情况下做到这一点，并尽可能使其成为跨浏览器。我尝试了各种事情，但没有一个有效，我不确定从这里尝试什么。

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

Answer 1

如果你使用它似乎工作

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

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

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

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

另外，你错过了f来自overflow-y: scroll;

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

带有两个可滚动 div 的演示

Answer 4

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

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

Answer 5

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

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