Как поместить полосу прокрутки только для модального тела в модальный диалог bootstrap

Если вы поддерживаете только IE 9 или выше, вы можете использовать этот CSS, который будет плавно масштабироваться до размера окна. Возможно, вам придется настроить "200px", хотя, в зависимости от высоты вашего верхнего или нижнего колонтитула.

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

проблема решена с помощью комбинированного решения @carlos calla и @jonathan marston.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

на Карлос Каллыотличный ответ.

высоту .modal-body должен быть установлен, но вы можете использовать запросы мультимедиа, чтобы убедиться, что он подходит для размера экрана.

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

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

дополнительно: Если вы не хотите, чтобы модальное превышать высоту окна и использовать полосу прокрутки в .modal-body, вы можете использовать это отзывчивое решение. Смотрите рабочую демонстрацию здесь:http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

или проще вы можете поместить между тегами сначала, а затем в класс css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

Я знаю, это старая тема, но это может помочь кому-то еще.

я смог сделать прокрутку тела, сделав положение элемента модального диалога фиксированным. И поскольку я никогда не узнаю точную высоту окна браузера, я взял информацию, в которой был уверен, высоту верхнего и нижнего колонтитулов. Затем я смог сделать верхние и Нижние поля элемента модального тела соответствующими этим высотам. Это тогда дало результат, который я искал. Я бросил вместе скрипку, чтобы покажи мою работу.

кроме того, если вы хотите полноэкранный диалог просто отменить комментарий ширина:авто; внутри .модальное диалоговое окно.полноэкранный раздел.

https://jsfiddle.net/lot224/znrktLej/

и вот css, который я использовал для изменения диалогового окна начальной загрузки.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

простое решение js для установки модальной высоты, пропорциональной высоте тела:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

высота тела должна быть 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Я установил модальную высоту тела до 80% тела, это можно конечно подгонять.

надеюсь, что это помогает.

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

используя max-height С vh единица на modal-body или обертка div внутри modal-body. Это позволит изменить высоту modal-body или перенос div (в данном примере) автоматически при изменении размера окна пользователем.

vh единица длины, представляющая 1% от размера видового экрана для высоты видового экрана.

совместимость с браузерами график vh единица.

пример: https://jsfiddle.net/q3xwr53f/