如何在bootstrap模式对话框中仅为模态体添加滚动条

10 回答

• 0

  或者更简单，您可以先放置标签，然后放入css类 .

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

  回复于 2024-04-20T07:35:56+08:00
• 10

  您必须设置 .modal-body 的 height 并将其设为 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;
  }
  

  回复于 2024-04-20T07:35:56+08:00
• 0

  如果您只支持IE 9或更高版本，则可以使用这个可以平滑扩展到窗口大小的CSS . 您可能需要调整“200px”，具体取决于页眉或页脚的高度 .

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

  回复于 2024-04-20T07:35:56+08:00
• 214

  使用组合解决方案@carlos calla和@jonathan marston解决问题 .

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

  回复于 2024-04-20T07:35:56+08:00
• 0

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

  回复于 2024-04-20T07:35:56+08:00
• 10

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

  回复于 2024-04-20T07:35:56+08:00
• 90

  我知道这是一个古老的话题，但这可能有助于其他人 .

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

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

  回复于 2024-04-20T07:35:56+08:00
• 3

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

  希望能帮助到你 .

  回复于 2024-04-20T07:35:56+08:00
• 24

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

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

  vh 是长度单位，表示视口高度的视口大小的1％ .

  Browser compatibility图表 vh 单位 .

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

  回复于 2024-04-20T07:35:56+08:00
• 4

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

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

  回复于 2024-04-20T07:35:56+08:00