三个垂直堆叠的中间滚动分隔符

这应该管用

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
</div>

编辑-用于模式对话框中的固定位置页眉和页脚

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;">
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
    </div>
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
    </div>
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
    </div>
</div>

2017年再次访问。使用flexbox,现在无需显式定义页眉和页脚的高度即可完成此操作。这至少在所有当前拥有重要市场份额的浏览器中都有效,但ie<=10除外,它仍然有1-5%的份额,这取决于您的要求。因为这通常是一种视觉/可用性机制,并且不会阻塞功能,所以在这种情况下使用flexbox至少应该使页面对不受支持的浏览器的用户可用。

您所需要做的就是将页眉、内容和页脚包装在一个具有明确高度(例如,正文或其子级具有100%高度)的DIV中,样式为:

  display: flex;
  flex: auto;
  flex-direction: column;

并将样式应用于可滚动窗格:

  overflow-y: auto;

如果希望可滚动窗格增大,以便使用所有垂直空间:

  flex-grow: 1;

在页眉和页脚(对于Safari和IE 10是必需的):

  flex-grow: 0;

https://jsfiddle.net/ornsk10a/