修复了全屏高度外部容器，内部内容溢出答案

【问题标题】：Fixed Full Screen Height Outer Container, with Overflowed Content Inside修复了全屏高度外部容器，内部内容溢出
【发布时间】：2016-09-29 22:01:15
【问题描述】：

我有一个模态框，它从右侧滑出并占据浏览器窗口的整个高度。它有页眉、页脚和中间内容。如果中间内容变得足够高，我希望它滚动（溢出：自动）。这可能吗？

这是我的模态屏幕截图：

所以本质上，我希望页眉和页脚保持在原处（顶部的页眉，底部的页脚或内容的底部），如果我现在调整浏览器窗口的大小，拉自下而上，一旦浏览器的高度变得比内容短，我希望看到滚动条出现在中间内容中。

.modal-body {
    overflow: auto;
}

似乎什么也没做。

【问题讨论】：

【解决方案1】：

您需要为模型主体添加高度并溢出自动或滚动

demo link

【讨论】：

【解决方案2】：

有效的方法是将overflow: auto 放在.modal-content 上。但是随后关闭按钮消失了，因为它位于溢出的内容之外。要解决此问题，请将其放在更高的 div 中，它应该可以按预期工作：

【讨论】：