CSS 带有可滚动体的 Twitter Bootstrap 3 Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26807524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 Modal with Scrollable Body
提问by Vero
I am moving from Bootstrap 2 to Bootstrap 3. In the old version, I was using modals which had long content, and the modals automatically scrolled when a given max height was reached.
我正在从 Bootstrap 2 迁移到 Bootstrap 3。在旧版本中，我使用的是内容较长的模态，当达到给定的最大高度时，模态会自动滚动。
In Bootstrap 3, the modal just extends to show the entire content, and I have to use page down key to actually get to the end of it and see the buttons in the modal footer. I cannot use the scrollbar in the far right of the browser window, because it is covered by the backdrop, and in any case that would not be intuitive to scroll just the content in the modal box.
在 Bootstrap 3 中，模态只是扩展以显示整个内容，我必须使用向下翻页键才能真正到达它的末尾并查看模态页脚中的按钮。我无法使用浏览器窗口最右侧的滚动条，因为它被背景覆盖，无论如何，仅滚动模式框中的内容是不直观的。
How can I achieve a modal in bootstrap 3 that automatically inserts a scrollbar to scroll content when a maximum height is reached?
如何在 bootstrap 3 中实现一个模式，当达到最大高度时自动插入滚动条来滚动内容？
I tried setting max height to the modal class, like this:
我尝试将最大高度设置为模态类，如下所示：
.modal{
max-height:80%;
}
.modal-header{
height:15% !important;
}
.modal-body{
height:70%;
overflow:auto;
}
.modal-footer{
height:15%;
}
But it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.
但它没有按预期工作。模态窗口确实达到了最大尺寸，但它只是在那里剪切了它的内容，甚至不显示页脚。
Thanks for any help.
谢谢你的帮助。
回答by Sebsemillia
Just add:
只需添加：
.modal-content {
height:250px;
overflow:auto;
}
The height can of course be adapted to your personal needs.
高度当然可以根据您的个人需求进行调整。
Update:
更新：
It's actually pretty easy. Just add:
这实际上很容易。只需添加：
.modal-body {
max-height: calc(100vh - 212px);
overflow-y: auto;
}
to your css.
到你的CSS。
It uses vhand calc, which also happen to have a good browser support (IE9+).
它使用vh和calc，它们也恰好具有良好的浏览器支持（IE9+）。
This is based on this answer. Please read there for more detailed information, I won't copy his answer.
这是基于这个答案。请阅读那里了解更多详细信息，我不会复制他的答案。
回答by unclejam
If you have dynamic content this can be a pain. I used this to make sure it had the correct height and then it would scroll:
如果您有动态内容，这可能会很痛苦。我用它来确保它具有正确的高度，然后它会滚动：
$('#modal').on('shown.bs.modal', function () {
$('.modal-dialog').css('height', $('.modal-dialog').height() );
});
$('#modal').on('hidden.bs.modal', function () {
$('.modal-dialog').css('height', 'auto');
});
回答by cvrebert
You seem to be describing https://github.com/twbs/bootstrap/issues/14916("Modal overlay is above scrollbar "), which will be fixed in Bootstrap v3.3.1 by https://github.com/twbs/bootstrap/pull/14927("Fix modal backdrop overlaying the modal's scrollbar").
您似乎在描述https://github.com/twbs/bootstrap/issues/14916（“模态覆盖在滚动条上方”），这将通过https://github.com/twbs/在 Bootstrap v3.3.1 中修复bootstrap/pull/14927（“修复覆盖模态滚动条的模态背景”）。
