如何将滚动条仅用于模体？

164

我有以下要素：

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

它显示了模态对话框，基本上是这样，它在整个滚动条上放置滚动条modal-dialog，而不modal-body包含我要显示的内容。

图像看起来像这样：

在此处输入图片说明

如何modal-body仅获得滚动条？

我曾尝试分配给style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"，modal-body但没有成功。

css  twitter-bootstrap 
— 苏博·尼杰苏（Subodh Nijsure）
source
1
请提供一个有效的示例，以便为您提供更好的帮助，您可以使用bootply.com/new来进行操作。
— 卡洛斯·卡拉
接下来，允许模式使刚刚身体里面滚动可选流体页眉和页脚块：stackoverflow.com/questions/49173969/...
— leontalbot

Answers:

297

你要设置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: 250px;
    overflow-y: auto;
}
— 卡洛斯·卡拉
source
谢谢你 效果很好。可能是我在CSS中不清楚的事情。我尝试分配模式主体最大高度：65％不起作用。您提供的解决方案仅在我为模态主体分配固定高度时才有效。有没有办法说模态对话占据了85％的窗口，而模态主体应该占据了模态对话的90％？但是，现在您提供的解决方案仍然对我有效。谢谢！
— Subodh Nijsure 2014年
3
@SubodhNijsure抱歉，回复晚。您不能以％设置高度，因为这将意味着其父级的％，在这种情况下，父级为.modal-content，其高度取决于其子级。这就是为什么除非您设置其中一个高度，否则它将不起作用的原因。您可以设置.modal-content高度，也可以设置.modal-body高度。如果您设置.modal-content height，那么您将能够以％设置.modal-body的高度，并且它将是其父级的％。因此，如果您将其设置为小于100％，则在底部，因为您没有填充所有.modal-content的高度。
— 卡洛斯·卡拉
请记住，CSS的initial关键字不适用于Internet Explorer，尽管它适用于Edge。
— trysis'8
18
只是一点点的指针：而不是“高度250px”，在某些高度仅为230px或在横向导航条件下较小的手机上可能看起来很丑陋：仅使用max-height: 80vh;那是总视口高度的80％且仅用于最大高度，如果不是是一个小弹出窗口
— Toskan
1
工作正常，但是在关闭模态后，不再可以单击“父”窗口上的链接...通过以下代码解决：.modal .modal-body {max-height：420px; 溢出-y：自动; }
— cwhisperer
119

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

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
— 乔纳森·马斯顿
source
根据[1]和[2]，Chrome，Firefox和Safari也支持此功能。[1] developer.mozilla.org/en-US/docs/Web/CSS/… [2] developer.mozilla.org/en-US/docs/Web/CSS/…–
— ctron
注意：此解决方案根据在顶部或底部选择的选项，使弹出窗口显示在页眉或页脚下方。请参阅我创建的此小提琴：jsfiddle.net/2qeo99k3/4如果没有css hack的话，将其删除就可以了。它有效
— Marc Roussel
一种用于将酥料饼的解决方法可以在这里找到：stackoverflow.com/questions/45666828/...
— 马克·鲁塞尔
20

对于Bootstrap版本> = 4.3

Bootstrap 4.3为模式添加了新的内置滚动功能。如果内容的大小会使页面滚动，则仅使模式主体内容滚动。要使用它，只需将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>
展开摘要

— 科多斯·约翰逊
source
14

补充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; }
}
— 劳拉鲁普
source
假设高度在移动设备上为400px或更大，这是错误的。用宽度确定高度根本不是可行的解决方案。有太多的用例会导致这种情况中断。
— 草莓2015年
2
@Strawberry，他实际上使用了最小高度（不是最小宽度），并确保给定的高度小于媒体查询中的最小高度。另外，他只是举例说明他的想法，因为媒体查询根据OP想要实现的目标而有很大不同。
— 卡洛斯·卡拉
12

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

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

通过固定模态对话框元素的位置，可以使主体滚动。而且由于我永远都不知道浏览器窗口的确切高度，因此我获得了我确定的信息，即页眉和页脚的高度。然后，我能够使模式主体元素的顶部和底部边距与这些高度匹配。然后产生了我想要的结果。我摆了一个小提琴来展示我的作品。

另外，如果要全屏对话框，只需取消注释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;
}
— 假冒酱油
source
5

或更简单的是，您可以先在标签之间插入，然后再添加到CSS类。

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
— 用户名
source
1 
#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

在或内的包装div 上使用max-heightwith vh作为单位。当用户调整窗口大小时，这将自动调整div或包裹div 的高度（在此示例中）。modal-bodymodal-bodymodal-body

vh 是长度单位，表示视口高度的1％。

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

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

— 史蒂文
source
1

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

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>
— 恩乔什恩
source
0

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

希望能帮助到你。

— 米格利
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.