Javascript Bootstrap 模态体最大高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14242227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal body max height 100%
提问by Pwnna
I have a custom sized (80% height width) bootstrap modal body and it scrolls (body content will overflow on some sized screens)
我有一个自定义大小（80% 高度宽度）引导模式主体，它会滚动（主体内容会在某些大小的屏幕上溢出）
There are 2 problems:
有2个问题：
- I can't set the max-height to 100% as that will be 100% of the entire document instead of the max height of the container, which is what i need for scrolling to work properly.
- If there is a div with a fixed height inside the modal body at the very end, it will overflow outside of the modal if the screen is not big enough for the content.
- 我无法将最大高度设置为 100%，因为这将是整个文档的 100%，而不是容器的最大高度，这是我需要滚动才能正常工作的内容。
- 如果最后在模态体内部有一个固定高度的div，如果屏幕不够大，内容就会溢出模态之外。
How would I fix this? I'm currently experimenting with negative margins but i'm not too familiar with it.
我将如何解决这个问题？我目前正在试验负边距，但我对它不太熟悉。
JavaScript solutions are acceptable (jQuery is available as is backbone.js)
JavaScript 解决方案是可以接受的（jQuery 和backbone.js 一样可用）
Thanks
谢谢
Edit: Screenshot provided
编辑：提供截图
Edit 2: More screenshot
编辑 2：更多截图
采纳答案by Pwnna
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")))
Or the equivalent javascript as generated per above.
或者上面生成的等效 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"));
});
回答by lluisaznar
I faced the same problem with a long form. Javascript was not an option for me, so I ended up with a fully HTML-CSS solution.
我在长表格中遇到了同样的问题。Javascript 不是我的选择，所以我最终得到了一个完整的 HTML-CSS 解决方案。
The main goal was to code it just working with percentages, in order to have an easy way to build the media queries.
主要目标是仅使用百分比对其进行编码，以便轻松构建媒体查询。
I've tested it with Firefox 22.0, Google Chrome 28.0.1500.71, Safari 6.0.5 and IE8. Here's the demo.
我已经使用 Firefox 22.0、Google Chrome 28.0.1500.71、Safari 6.0.5 和 IE8 对其进行了测试。这是演示。
Modal HTML Structure:
模态 HTML 结构：
The key is to have the structural divs clean from padding/margin/border. All these styles should be applied to the items inside them.
关键是让结构 div 从填充/边距/边框中清除。所有这些样式都应该应用于其中的项目。
<div id="dialog" class="modal hide dialog1" aria-hidden="false">
<div class="modal-header">
</div>
<div class="modal-body">
<div>
</div>
</div>
</div>
Styles:
款式：
The styles applied to these structure divs are the ones which determines its size.
应用于这些结构 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%;
}
For more detailed code, refer to the demo, where you'll see whole styling classes and those bootstrap styles which needs to be disabled/overriden.
有关更详细的代码，请参阅演示，您将在其中看到整个样式类和需要禁用/覆盖的引导样式。
回答by GianFS
try this Bootstrap Modal v2.1
尝试这个 Bootstrap Modal v2.1
回答by Deevan
You just need to set the height of modal popup on its show, get the height of screen / window and set it to modal's height. (you can multiply it by 0.8 to get 80% height of screen, which fits nicely).
您只需要在其显示中设置模态弹出窗口的高度，获取屏幕/窗口的高度并将其设置为模态的高度。（您可以将其乘以 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);
});
回答by tsdexter
As a follow up to pwnna's answer this code is working better for me as it's working with a variable height depending on the content size with a max-height as well and it runs on load too, instead of just resize.
作为 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"));
});
回答by Andy
Here is a fully working Sass solution, but it requires flexbox.
这是一个完全有效的 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
回答by Daniel de Lima
This code
这段代码
//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"));
});
Written by tsdexter, it worked for me!
由 tsdexter 撰写，它对我有用！
回答by elnino3800
Pwnna's answer have good concept, bud doesn't work for me. Here is solution that work's for me:
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);
It's depend's on css:
这取决于css：
.modal-body {
overflow-y: auto;
}
回答by Luke
you should try to position it absolutly within an element whose position is set to relative. There you then can work with something like
您应该尝试将其绝对定位在位置设置为相对的元素中。然后你可以使用类似的东西
{
bottom:0;
top:0;
left:0;
right:0;
回答by Guffa
Make the htmland bodyelements fill the window:
使html和body元素填充窗口：
html, body { height: 100%; }
Now you can use max-height: 100%on the element inside body, and it will be 100% of the window as the bodyelement now is the size of the window.
现在您可以max-height: 100%在 body 内部的元素上使用，它将是窗口的 100%，因为body元素现在是窗口的大小。
