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＆lt; = 10之外，目前还有任何显着的市场份额，根据你的要求，它仍有1-5％的份额。因为这通常是一种可视/可用性机制并且不会阻止功能，所以在这种情况下使用flexbox至少应该让您的页面可供不受支持的浏览器用户使用。

您需要做的就是将标题，内容和页脚包含在具有明确高度的div中（例如，身体或其子项高度为100％），样式为：

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

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

  overflow-y: auto;

如果您希望可滚动窗格增长，则使用所有垂直空间：

  flex-grow: 1;

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

  flex-grow: 0;

https://jsfiddle.net/ornsk10a/

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

2 个答案: