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.

工作范例

更新：

这很容易。只需添加：

.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+).

这是基于此 answer 。请阅读详细信息，我不会复制他的答案。

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

工作示例

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