如何把滚动条只为情态体?

我有以下元素:

<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;"到模态体，但它没有工作。

当前回答

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

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

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

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

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

2015-12-23 23:59:03

其他回答

问题解决了结合解决方案@卡洛斯卡拉和@乔纳森马斯顿。

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

2016-06-20 15:05:12

卡洛斯·卡拉的回答很好。

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

2015-07-11 19:21:32

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

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

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

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

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

2015-12-23 23:59:03

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

2015-09-30 16:45:11

对于引导版本>= 4.3

Bootstrap 4.3增加了新的内置滚动功能的模态。如果内容的大小可以使页面滚动，则只使情态体内容滚动。要使用它，只需将类modal-dialog-scrollable添加到具有modal-dialog类的相同div中。

这里有一个例子:

2019-05-21 00:24:42

如何把滚动条只为情态体?

推荐文章

最新文章

标签