Question

我有一个自定义尺寸（高度宽度为80％）的自举模态体，它会滚动（身体内容会在某些尺寸的屏幕上溢出）

有两个问题：

我无法将max-height设置为100％，因为它将是整个文档的100％而不是容器的最大高度，这是我需要滚动才能正常工作。
如果在最后一个模态体内有一个固定高度的div，如果屏幕不够大，它将溢出模态之外。

我该如何解决这个问题？我目前正在试验负利润，但我对它并不太熟悉。

JavaScript解决方案是可以接受的（jQuery可以作为backbone.js使用）

由于

编辑：提供截图

enter image description here

编辑2：更多屏幕截图

enter image description here

Answer 1

我屈服了并写了coffeescript来解决这个问题。如果有人有兴趣，这是coffeescript：

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

Answer 2

我遇到了长形式的同样问题。 Javascript不是我的选择，所以我最终得到了一个完整的HTML-CSS解决方案。

主要目标是使用百分比对代码进行编码，以便轻松构建媒体查询。

我已经使用Firefox 22.0，Google Chrome 28.0.1500.71，Safari 6.0.5和IE8进行了测试。 Here's the demo

模态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%;
}

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

Answer 3

试试这个Bootstrap Modal v2.1

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

Answer 4

您只需在其节目上设置模态弹出窗口的高度，获取屏幕/窗口的高度并将其设置为模态的高度。（你可以将它乘以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);
});

Answer 5

作为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"));
});

Answer 6

这是一个完全可用的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

Answer 7

你应该尝试将它绝对放在一个位置设置为相对的元素中。那时你可以使用像

这样的东西

{
    bottom:0;
    top:0;
    left:0;
    right:0;

Answer 8

让html和body元素填满窗口：

html, body { height: 100%; }

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

Answer 9

Pwnna的回答有很好的概念，芽对我不起作用。以下是为我工作的解决方案：

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

Answer 10

此代码

//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，它对我有用！

Bootstrap模态体最大高度100％

10 个答案: