在固定位置容器中滚动部分内容
我有一个position: fixed div在布局，作为一个侧边栏。 我被要求将其内容的一部分保持固定在其顶部（内部），其余部分如果溢出底部，则会滚动。
我已经看了这个答案 ，但是那里提出的解决scheme不适用于position: fixed或者position: absolute容器，这是一个痛苦。
我在这里做了一个JSFiddle演示我的问题。 大量的文本应理想滚动，而不是溢出到页面的底部。 标题的高度可以随着内容而变化，并且可以是animation的。
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 必须保持position: fixed ，我非常想做到这一点，没有任何黑客，以及尽可能跨浏览器。 我尝试了各种各样的东西，但都没有成功，而且我不确定要从这里尝试什么。
如何在一个position: fixed创build一个div position: fixed容器只在Y方向上滚动时，它的内容溢出了包含div，具有不同的，不确定的高度的固定头部？ 我非常想远离JS，但如果我必须使用它，我会的。
这似乎工作，如果你使用
div#scrollable { overflow-y: scroll; height: 100%; }
并添加padding-bottom: 60px到div.sidebar 。
例如： http : //jsfiddle.net/AKL35/6/
不过，我不确定为什么它必须是60px 。
另外，你错过了从overflow-y: scroll; f overflow-y: scroll;
我改变了滚动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的演示
其实这是更好的方法来做到这一点。 如果使用height: 100% ，则内容越过边界，但是当它是95%所有内容都是按顺序排列的：
div#scrollable { overflow-y: scroll; height: 95%; }
设置可滚动的div有一个max-size并添加overflow-y: scroll; 到它的属性。
编辑：试图让jsfiddle工作，但它不正确滚动。 这将需要一些时间来弄清楚。
