在每个人之下对齐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;}

即使您滚动，position:fixed的{​​p> #ToolBar也会始终在同一个地方。

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

Answer 2

在#ToolBar上尝试position:fixed;。我不认为#BookText上需要overflow:scroll;。使用浏览器滚动条。