自行车模态身高最大高度100％ [英] Bootstrap modal body max height 100%

问题描述

我有一个自定义尺寸（高度为80％的）引导模式体和它的卷轴（主体内容将溢出在一些大小的屏幕上）

I have a custom sized (80% height width) bootstrap modal body and it scrolls (body content will overflow on some sized screens)

有2个问题：

1. 我无法将max-height设置为100％，因为这将是整个文档的100％，而不是最大高度


2. 如果在模态体内部有一个固定高度的div，它将溢出模态

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

How would I fix this? I'm currently experimenting with negative margins but i'm not too familiar with it.

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

JavaScript solutions are acceptable (jQuery is available as is backbone.js)

感谢

编辑：提供的屏幕截图

编辑2：更多屏幕截图

>

推荐答案

我插入并写了coffeescript来解决这个问题。如果有人有兴趣，这里是咖啡：

I caved in and wrote coffeescript to fix this. If anyone's interested, here's the 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。

Or the equivalent javascript as generated per above.

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

这篇关于自行车模态身高最大高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！