我看了一下this answer，但是解决方案提出了不工作在position：fixed或position：绝对容器，这是一个痛苦。

我做了一个JSFiddle演示我的问题here.大量的文本应该理想地滚动，而不是溢出到页面的底部。标题的高度可以随内容而变化，并且可以是动画的。

JSFiddle示例代码：

CSS：

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

HTML：

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

    <div id="scrollable">
        Potentially long content
    </div>
</div>​

没有固定的标题，我可以简单地添加overflow-y：scroll到div.sidebar，我可以很高兴地滚动所有的内容，如果它溢出容器的底部。但是，我遇到了问题，在侧边栏的顶部有一个固定的，可变高度的标题，并有任何内容下面的滚动，如果太长，不适合容器。

div.sidebar必须保持位置：固定的，我会非常想这样做没有任何黑客，以及使它作为跨浏览器尽可能。我尝试过各种各样的事情，但没有一个工作，我不确定从这里尝试。

如何使一个div在一个位置：固定容器滚动只有在Y方向，当它的内容溢出包含的div，固定标题的变化，不确定的高度？我非常想远离JS，但如果我必须使用它，我会的。