三个垂直堆叠的DIV,滚动中间

Question

是否可以垂直堆叠三个DIV并且只有中间div垂直滚动？但是,我不想使用像素高度,因为DIV位于可调整大小的对话框内.像这样的东西(原谅我糟糕的ASCII艺术):

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|  Footer   |
+-----------+

目标是固定页眉和页脚,随着对话框的增长,中间div将垂直增长.也许我只是愚蠢,但过去几个小时我一直在争吵,似乎无法做到这一点.三个DIV可能需要在"另一个"DIV中,但是当我这样做,并将高度设置为100%时,它会随着中间DIV的增长而增长.再说一次,这可能是一些愚蠢的事情,我不记得了.我也试过使用TABLE无济于事.

谢谢你的帮助.

Answer 1

这应该工作

<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>

Answer 2

再来看看2017年。现在有了flexbox，无需显式定义页眉和页脚的高度即可完成此操作。该功能至少在所有前缀的浏览器中有效，除了IE <= 10以外，该浏览器目前具有任何重要的市场份额，IE仍具有1-5％的份额，具体取决于您要求的人。因为这通常是一种视觉/可用性机制，并且不会阻止功能，所以在这种情况下使用flexbox至少应使您的页面可用于不受支持的浏览器的用户。

您需要做的就是将页眉，内容和页脚包装在一个具有明显高度的div中（例如，body或其高度为100％的子级），其样式如下：

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

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

  overflow-y: auto;

如果要使可滚动窗格增大，以便使用所有垂直空间：

  flex-grow: 1;

在页眉和页脚（Safari和IE 10必需）上：

  flex-grow: 0;

https://jsfiddle.net/ornsk10a/