css - 彼此对齐 2 个 div，一个固定，另一个有滚动条

Question

我正在尝试将 2 个 div 放在彼此下面 ..

顶部的div应该有一个固定的高度 底部的 div 应该填满页面的其余部分(宽度=100% 高度=100%)并且如果需要还显示滚动条..

我现在拥有的是:

<div id="wrapper">
<div id="ToolBar" style="width:100%;"></div>
<div id="BookText" dir="rtl" style="overflow:scroll;"></div>
</div>

问题是:

当我滚动 BookText div 时，ToolBar div 向上滚动太多并变得不可见..

我只想让工具栏 div 固定在 booktext div 之上..

有什么想法吗？ 提前致谢

Answer 1

你可以使用类似下面的 css:

 html,body,#wrapper {height:100%;margin:0;padding:0;}
 #ToolBar{height:100px;background:red;position:fixed;}
 #BookText {height:100%;overflow:auto;background:blue;padding-top:100px;}

#ToolBar 的

position:fixed 将始终在同一位置，即使您滚动也是如此。

演示:http://jsbin.com/irune6