css 3 divs定位,一个溢出:滚动

时间:2011-10-05 11:14:38

标签: css

如果你看这个小提琴:http://jsfiddle.net/kamilszokaluk/uhmYg/ 我有3个div,上面的一个应该位于页面顶部,低于可见部分的底部(没有滚动)。他们没有移动,所以我的第一个想法是设置他们的位置:固定为顶部:0表示第一个和底部:0表示秒。但我的目标是滚动的唯一div是“内容”div,当我设置上面提到的位置时,整个页面是可滚动的。预期的布局是这样的:

 _________________         __
|                 |          |
|       upper     |          |
|_________________|          |
|                ||          |
|   content with ||          |
|   scroll       ||          |---your browser window
|                ||          |
|________________||          |
|                 |          |
|    lower        |          |
|_________________|        __|

是否可以忽略“内容”的高度,导致它发生变化?

2 个答案:

答案 0 :(得分:2)

我认为你的问题是你不能只在.content上设置一个固定的高度,因为你希望它能自动填充任何剩余的中间空间吗?

在这种情况下,您需要使用百分比高度,或者我的首选方法是让内容div从上部div下方延伸到页面底部,负边距等于底部div的高度。

或者只是中间div的绝对位置:http://jsfiddle.net/uhmYg/9/

编辑:添加了绝对示例

答案 1 :(得分:0)

.content设置固定高度,然后添加overflow-y:scroll;

演示:http://jsfiddle.net/uhmYg/4/