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

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,我非常想在没有任何黑客的情况下做到这一点,并尽可能使其成为跨浏览器.我尝试了各种各样的东西,但没有一个能起作用,我不确定从这里尝试什么.

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.

此外,你错过了f从overflow-y: scroll;

Answer 2

什么对我有用：

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