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

我有以下元素:

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

当前回答

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

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

2017-05-17 17:38:53

其他回答

如果你只支持IE 9或更高版本，你可以使用这个CSS来平滑地缩放到窗口的大小。你可能需要调整“200px”，这取决于你的页眉或页脚的高度。

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

2015-08-07 16:15:02

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

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

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

另外，如果你想要一个全屏对话框，只需取消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;
}

2016-10-21 12:40:51

在你的模态体中，你必须设置一个高度，它可以是% vh或calc:

modal-body {
    height: 80vh;
    overflow-x: auto;
}

modal-body {
    height: calc(100vh - 5em);
    overflow-x: auto;
}

在我的例子中是这样的:

2020-10-07 20:45:39

对于引导版本>= 4.3

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

这里有一个例子:

2019-05-21 00:24:42

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

推荐文章

最新文章

标签