CSS 3 div的定位，一个溢出:滚动

Question

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

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

是否可以忽略"content"的高度，因为它会改变?

Answer 1

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

在这种情况下，你需要使用百分比高度，或者我更喜欢的方法是让内容div从上面的div下面延伸到页面的底部，并使用与底部div的高度相等的负边距。

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

编辑:添加绝对示例

Answer 2

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

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