Twitter Bootstrap 3 Модальный с прокручиваемым телом

Я перехожу из Bootstrap 2 в Bootstrap 3. В старой версии я использовал модалы, у которых было длинное содержимое, и модалы автоматически прокручивались при достижении заданной максимальной высоты.

В Bootstrap 3 модальная версия просто расширяется, чтобы показать весь контент, и я должен использовать кнопку вниз страницы, чтобы на самом деле дойти до конца и увидеть кнопки в модальном нижнем колонтитуле. Я не могу использовать полосу прокрутки в крайнем правом углу окна браузера, потому что она покрыта фоном, и в любом случае не будет интуитивно прокручивать только содержимое в модальном поле.

Как я могу достичь модальности в бутстрапе 3, который автоматически вставляет полосу прокрутки для прокрутки содержимого при достижении максимальной высоты?

Я попытался установить максимальную высоту для модального класса, например:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

Но он работает не так, как ожидалось. Модальное окно достигает максимального размера, но оно просто сокращает его содержимое, а нижний колонтитул даже не отображается.

Спасибо за любую помощь.

Ответы

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

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

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});