如何只为模态体放置滚动条？

Question

Answer 1

您必须设置

height

的

.modal-body

并给予它

overflow-y: auto

。同时将

.modal-dialog

溢出值重置为

initial

。

查看工作示例：

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

Answer 2

如果您仅支持 IE 9 或更高版本，则可以使用此 CSS，它将平滑缩放到窗口的大小。不过，您可能需要调整“200px”，具体取决于页眉或页脚的高度。

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

Answer 3

对于 Bootstrap 版本 >= 4.3

Bootstrap 4.3 为模态框添加了新的内置滚动功能。如果内容的大小会使页面滚动，则这只会使 modal-body 内容滚动。要使用它，只需将类 modal-dialog-scrollable 添加到具有 modal-dialog 类的同一 div 中即可。

这是一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 4

通过组合解决方案@carlos calla 和@jonathan marston 解决了问题。

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

Answer 5

补充Carlos Calla的精彩答案。

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

Answer 6

可选：如果您不希望模态超出窗口高度并在 .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'));
  }
});

Answer 7

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

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

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

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

Answer 8

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

我能够通过固定模态对话框元素位置来使主体滚动。由于我永远不会知道浏览器窗口的确切高度，因此我获取了我确定的信息，即页眉和页脚的高度。然后，我能够使模态主体元素的顶部和底部边距与这些高度相匹配。然后这产生了我正在寻找的结果。我拼凑了一把小提琴来展示我的作品。

另外，如果您想要全屏对话框，只需取消注释 width:auto;在 .modal-dialog.full-screen 部分内。

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

Answer 9

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

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

Answer 10

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

使用

max-height

和

vh

作为

modal-body

上的单位或

modal-body

内部的包装 div。当用户调整窗口大小时，这将自动调整

modal-body

或包装 div（在本例中）的高度。

vh

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

vh

设备的浏览器兼容性

图表。

示例：https://jsfiddle.net/q3xwr53f/

Answer 11

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

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

或

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

就我而言，看起来像：

Answer 12

对我有用的是将高度设置为 100%，自动溢出希望这会有所帮助

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

Answer 13

一个简单的 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%，这当然可以定制。

希望有帮助。

Answer 14

这是我网站上完整的 Sass 重写（仍在构建中，一旦准备好将添加到此处）

它是 100% 移动响应且适合屏幕（仅当内容足够大时，否则宽度和高度将适合内容，所以是的，它很灵活）：

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

为了灵活和可滚动

modal-body

，用

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
}

Answer 15

如果您使用boostrap，您可以将标签粘贴到div处：类=“dataTables_scrollBody”样式=“位置：相对；溢出：自动；最大高度：500px；”

Answer 16

添加类

modal-dialog-scrollable

如果您使用的是bootstrap 4.5或更高版本

否则

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

如何只为模态体放置滚动条？

问题描述投票：0回答：16

16个回答

对于 Bootstrap 版本 >= 4.3

最新问题

如何只为模态体放置滚动条？

问题描述 投票：0回答：16

16个回答

对于 Bootstrap 版本 >= 4.3

最新问题

问题描述投票：0回答：16