Bootstrap模态体最大高度100%

Question

我有一个自定义大小(80%高度宽)引导模态体,它滚动(身体内容将在某些大小的屏幕上溢出)

有两个问题:

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

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

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

谢谢

编辑:提供截图

编辑2:更多截图

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,谷歌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%;
}

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