我知道这是一个老话题，但这可能会帮助到其他人。

我可以通过固定模态对话框元素位置来让主体滚动。由于我永远不知道浏览器窗口的确切高度，所以我使用了我确定的信息，即页眉和页脚的高度。然后我就可以使模态体元素的顶部和底部边缘匹配这些高度。这就产生了我想要的结果。我匆匆做了一把小提琴来展示我的作品。

另外，如果你想要一个全屏对话框，只需取消width的注释:auto;在.modal对话框中。全屏部分。

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

你必须设置。modal-body的高度并赋予它overflow-y: auto。同时将.modal-dialog溢出值重置为初始值。

参见工作示例:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 80vh;
    overflow-y: auto;
}

可选:如果你不想让模态超过窗口高度，并在.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'));
  }
});

在最新的引导版本中，有一个类使模态体可滚动。

.modal-dialog-scrollable到.modal-dialog。

用于模态体可滚动内容的引导模态链接

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

这是我网站上完整的Sass重写(仍在构建中，一旦准备好就会添加到这里) 它是100%的移动响应和适合屏幕(只有当内容足够大时，否则宽度和高度将适合内容，所以是的，它是灵活的):

在大于576px (sm)的屏幕上，间距为1.75rem(4边相等) 在小于576px的屏幕上的间距为0.5rem

对于灵活且可滚动的模态体，注释为required的行是所需的最小代码。

.modal-header,
.modal-footer {
  border: none !important;
}

.modal-dialog {
  height: 100% !important; // required
  margin: 0 0.5rem !important;
  padding: 0.5rem 0 !important;
  overflow-y: initial !important; // required

  @media (min-width: $sm) {
    margin: 0 auto !important;
    padding: 1.75rem 0 !important;
    max-width: initial !important; // overwrite default max-width
    width: fit-content !important; // flexible width
    min-width: 500px !important; // makes it fat enough by default
  }
}

.modal-content {
  max-height: 100% !important; // required
}

.modal-body {
  padding-top: 0 !important;
  overflow-y: auto !important; // required
}

对我来说有用的是将高度设置为100%，并在自动状态下溢出 希望这能有所帮助

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