固定全屏高度外容器，内部溢出内容

Question

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

这是我的模态的截图：

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

.modal-body {
    overflow: auto;
}

似乎没有做任何事情。

这是JS小提琴：https://jsfiddle.net/707xbabw/2/

Answer 1

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

demo link

here

Answer 2

将overflow: auto放在.modal-content上的工作是什么。然后关闭按钮消失，因为它生活在溢出的内容之外。要解决这个问题，请将它放在div中，它应该按照以下方式工作：

请参阅：https://jsfiddle.net/707xbabw/7/