14

我有一个自定义大小（80% 高度宽度）的引导模态主体，它可以滚动（主体内容会在某些尺寸的屏幕上溢出）

有2个问题：

  1. 我不能将最大高度设置为 100%，因为这将是整个文档的 100%，而不是容器的最大高度，这是滚动正常工作所需要的。
  2. 如果最末端的模态体内部有一个固定高度的div，如果屏幕不够大，它会溢出模态体之外。

我将如何解决这个问题？我目前正在尝试负边距，但我不太熟悉它。

JavaScript 解决方案是可以接受的（jQuery 和backbone.js 一样可用）

谢谢

编辑：提供截图

在此处输入图像描述

编辑2：更多截图

在此处输入图像描述

4

10 回答 10

9

我屈服并写了咖啡脚本来解决这个问题。如果有人感兴趣，这里是咖啡脚本：

fit_modal_body = (modal) ->
  header = $(".modal-header", modal)
  body = $(".modal-body", modal)

  modalheight = parseInt(modal.css("height"))
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"))
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"))

  height = modalheight - headerheight - bodypaddings - 5 # fudge factor

  body.css("max-height", "#{height}px")

# Here you need to bind your event with the appropriate modal, as an example:
$(window).resize(() -> fit_modal_body($(".modal")))

或上面生成的等效 javascript。

var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = modalheight - headerheight - bodypaddings - 5;
  return body.css("max-height", "" + height + "px");
};

$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
于 2013-01-13T18:25:59.230 回答
6

我在长表格上遇到了同样的问题。Javascript 对我来说不是一个选项，所以我最终得到了一个完整的 HTML-CSS 解决方案。

主要目标是仅使用百分比对其进行编码，以便有一种简单的方法来构建媒体查询。

我已经使用 Firefox 22.0、Google Chrome 28.0.1500.71、Safari 6.0.5 和 IE8 对其进行了测试。这是演示。

模态 HTML 结构：

关键是让结构 div 从填充/边距/边框中清除。所有这些样式都应该应用于其中的项目。

<div id="dialog" class="modal hide dialog1" aria-hidden="false">
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <div>
        </div>
    </div>
</div>

款式：

应用于这些结构 div 的样式决定了其大小。

.modal.dialog1 { /* customized styles. this way you can have N dialogs, each one with its own size styles */
    width: 60%;
    height: 50%;
    left: 20%; /* ( window's width [100%] - dialog's width [60%] ) / 2 */
}

/* media query for mobile devices */
@media ( max-width: 480px ) {
    .modal.dialog1 {
        height: 90%;
        left: 5%; /* ( window's width [100%] - dialog's width [90%] ) / 2 */
        top: 5%;
        width: 90%;
    }
}

/* split the modal in two divs (header and body) with defined heights */
.modal .modal-header {
    height: 10%;
}

.modal .modal-body {
    height: 90%;
}

/* The div inside modal-body is the key; there's where we put the content (which may need the vertical scrollbar) */
.modal .modal-body div {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

有关更详细的代码，请参阅演示，您将在其中看到整个样式类以及需要禁用/覆盖的引导样式。

于 2013-07-27T11:28:12.893 回答
4

试试这个Bootstrap Modal v2.1

https://github.com/jschr/bootstrap-modal

于 2013-05-19T16:08:12.923 回答
3

您只需要在其显示上设置模态弹出窗口的高度，获取屏幕/窗口的高度并将其设置为模态的高度。（您可以将它乘以 0.8 以获得 80% 的屏幕高度，这非常适合）。

$('#YourModalId').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    var _height = $(window).height()*0.8;
    $('.modal .modal-body').css('max-height', _height);
});
于 2017-08-14T19:50:34.523 回答
2

作为 pwnna 的回答的后续行动，这段代码对我来说效果更好，因为它使用可变高度，这取决于内容大小和最大高度，并且它也在加载时运行，而不仅仅是调整大小。

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});
于 2014-11-11T16:33:26.233 回答
2

这是一个完全可用的 Sass 解决方案，但它需要 flexbox。

  // don't clamp modal height when screen is shorter than 400px
  // .modal-body is short in that case, and the default behavior
  // (entire modal will scroll) is easier to use
  @media(min-height:400px)
    .modal
      // use top/bottom margin here instead of .modal-dialog
      // so that .modal-dialog can use height: 100%
      margin: 30px
      // without overflow: visible the shadow will be clipped
      // at the bottom
      overflow: visible

      > .modal-dialog
        margin: 0 auto
        // height must be explicitly set for .modal-content to
        // use percentage max-height
        height: 100%

        > .modal-content
          display: flex
          flex-direction: column
          max-height: 100%

          > .modal-header,
          > .modal-footer,
            // don't allow header/footer to grow or shrink
            flex: 0 0 auto

          > .modal-body
            // allow body to shrink but not grow
            flex: 0 1 auto
            // make body scrollable instead of entire modal
            overflow-y: auto
于 2015-10-21T19:06:46.637 回答
0

您应该尝试将其绝对定位在位置设置为相对的元素中。然后你可以在那里使用类似的东西

{
    bottom:0;
    top:0;
    left:0;
    right:0;
于 2013-01-09T16:55:24.557 回答
0

使html和body元素填充窗口：

html, body { height: 100%; }

现在您可以max-height: 100%在 body 内的元素上使用，它将是 100% 的窗口，因为body元素现在是窗口的大小。

于 2013-01-09T17:02:06.417 回答
0

Pwnna 的回答有很好的概念，bud 对我不起作用。这是适合我的解决方案：

fit_modal_body = function (modal, padding) {
    var windowHeight = $(window).height();
    var modalHeight = modal.height();

    var dif = windowHeight - (modalHeight + 2*padding);
    var modalBody = $(".modal-body:first", modal);
    modalBody.css("max-height", modalBody.height() + dif);
};

resizeLastWindow = function () {
    fit_modal_body($(".modal-dialog:last"), 15);
};

$(window).resize(resizeLastWindow);

这取决于css：

.modal-body {
    overflow-y: auto; 
}
于 2015-10-21T09:53:00.320 回答
0

这段代码

//adjust modal body sizes
var fit_modal_body;

fit_modal_body = function(modal) {
  var body, bodypaddings, header, headerheight, height, modalheight;
  header = $(".modal-header", modal);
  footer = $(".modal-footer", modal);
  body = $(".modal-body", modal);
  modalheight = parseInt(modal.css("height"));
  headerheight = parseInt(header.css("height")) + parseInt(header.css("padding-top")) + parseInt(header.css("padding-bottom"));
  footerheight = parseInt(footer.css("height")) + parseInt(footer.css("padding-top")) + parseInt(footer.css("padding-bottom"));
  bodypaddings = parseInt(body.css("padding-top")) + parseInt(body.css("padding-bottom"));
  height = $(window).height() - headerheight - footerheight - bodypaddings - 150;
  return body.css({"max-height": "" + height + "px", 'height':'auto'});
};

fit_modal_body($(".modal"));
$(window).resize(function() {
  return fit_modal_body($(".modal"));
});

由 tsdexter 编写，它对我有用！

于 2016-06-16T14:36:06.877 回答