Twitter引导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 2转移到Bootstrap 3。在旧版本中，我使用的是内容较长的modals，当达到给定的最大高度时，modals会自动滚动。

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中，模态扩展为显示整个内容，我必须使用page down键才能到达它的末尾，并看到模态页脚中的按钮。我不能在浏览器窗口的最右边使用滚动条，因为它被背景覆盖，而且在任何情况下，仅仅滚动模式框中的内容都是不直观的。

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.

感谢任何帮助。

3 个解决方案

#1

Just add:

添加:

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

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

当然，身高也可以根据你的个人需求来调整。

Working Example

工作示例

Update:

更新:

It's actually pretty easy. Just add:

它实际上是非常容易的。添加:

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

to your css.

你的css。

It uses vh and 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.

这是基于这个答案。请在那里阅读更多的详细信息，我不会复制他的答案。

Working Example

工作示例

#2

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');
});

#3

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/pulles/14927(“修正模态背景覆盖模式的滚动条”)在Bootstrap v3.3.1中修复。