我有以下元素:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

它显示模态对话框,基本上,它把滚动条放在整个模态对话框周围,而不是包含我要显示的内容的模态主体周围。

图片看起来是这样的:

我如何得到一个滚动条周围的情态体只?

我试过分配style="overflow-y: scroll;max-height: 85%;margin-top: 50 px;Margin-bottom:50px;"到模态体,但它没有工作。


当前回答

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

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

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

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

其他回答

如果您正在使用4.5或更高版本的引导,则添加类modal-dialog-scrollable

else

.modal-body{
    height :100%;
    over-flow-y:auto;
}

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

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

可选:如果你不想让模态超过窗口高度,并在.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'));
  }
});
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

在模态体上使用max-height和vh作为单位,或者在模态体内部使用包装器div。当用户调整窗口大小时,这将自动调整模态体或包装div(在本例中)的高度。

Vh是长度单位,表示视口高度占视口大小的1%。

vh单元的浏览器兼容性图表。

例如:https://jsfiddle.net/q3xwr53f/

或者更简单一点,你可以先放在标签之间,然后放到css类中。

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