带有可滚动正文的 Twitter Bootstrap 3 模态 [英] Twitter Bootstrap 3 Modal with Scrollable Body

问题描述

我正在从 Bootstrap 2 迁移到 Bootstrap 3.在旧版本中，我使用的是内容较长的模态框，当达到给定的最大高度时，模态框会自动滚动.

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

我尝试将最大高度设置为模态类，如下所示:

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.

感谢您的帮助.

推荐答案

只需添加:

.modal-content {
  height:250px;
  overflow:auto;
}

高度当然可以根据您的个人需求进行调整.

The height can of course be adapted to your personal needs.

工作示例

更新:

其实很简单.只需添加:

It's actually pretty easy. Just add:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

到你的CSS.

它使用 vh 和 calc，恰好也有很好的浏览器支持(IE9+).

It uses vh and calc, which also happen to have a good browser support (IE9+).

这是基于此答案.请阅读那里了解更多详细信息，我不会复制他的答案.

This is based on this answer. Please read there for more detailed information, I won't copy his answer.

工作示例

这篇关于带有可滚动正文的 Twitter Bootstrap 3 模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！