Bootstrap 模态体最大高度 100%答案

【问题标题】：Bootstrap modal body max height 100%Bootstrap 模态体最大高度 100%
【发布时间】：2013-01-09 16:51:19
【问题描述】：

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

有2个问题：

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

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

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

谢谢

编辑：提供截图

编辑 2：更多截图

【问题讨论】：

你能贴一些代码或者创建一个jsfiddle给我们看看吗？
这是我们很难想象的，要么摆弄它，要么链接或截图。
通过一些 javascript 代码而不是 CSS 魔法解决。

标签： javascript css html twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

我也很想使用 JS 布局，但由于我在正文和页脚中使用了动画折叠窗格，因此在使用 JS 制作动画期间很难很好地更新高度。

【解决方案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，您将在其中看到整个样式类以及需要禁用/覆盖的引导样式。

【讨论】：

【解决方案3】：

试试这个Bootstrap Modal v2.1

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

【讨论】：

这是一个很好的解决方案。它不仅解决了高度问题，而且还为 stock bootstrap modal 提供了许多其他改进。
BS3 现在有可选尺寸，“modal-sm”和“modal-lg”使用它来代替.. 上面的链接仅适用于 BS2

【解决方案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);
});

【讨论】：

【解决方案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"));
});

【讨论】：

很适合我。只是在变量定义中添加了页脚和页脚，并将 'height':'auto' 更改为 'height':'100%' 然后运行，因为我希望身体占据整个高度减去页眉和页脚。很好，谢谢。

【解决方案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

【讨论】：

【解决方案7】：

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

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

【讨论】：

如果需要，请更新图片

【解决方案8】：

使html 和body 元素填充窗口：

html, body { height: 100%; }

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

【讨论】：

如果需要，请更新图片
@ultimatebuster：您的溢出可能是未包含在父元素中的浮动元素。您可以在父元素上设置 overflow 样式以使其包含浮动子元素。
是的，我正在使用row-fluid 和span6 我还需要将最大高度设置为模态的高度减去标题，而不是现在的窗口。
为什么投反对票？如果你不解释你认为错的地方是什么，就无法改进答案。

【解决方案9】：

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

【讨论】：

【解决方案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，它对我有用！

【讨论】：