按百分比设置引导模式体高 [英] Set bootstrap modal body height by percentage
本文介绍了按百分比设置引导模式体高的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图做一个模态与一个body,当内容变得太大时将滚动。但是,我想要模态响应屏幕尺寸。当我设置max-height为40%它没有效果。但是,如果我将max-height设置为400px它工作正常,但不响应。我相信我只是缺少一些简单的东西,但我似乎不能让它工作。
I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can't seem to get it to work.
无效:
.modal-body {
max-height:40%;
overflow-y: auto;
}
工程:
.modal-body {
max-height:400px;
overflow-y: auto;
}
推荐答案
p>
This worked for me
.modal-dialog,
.modal-content {
/* 80% of window height */
height: 80%;
}
.modal-body {
/* 100% = dialog height, 120px = header + footer */
max-height: calc(100% - 120px);
overflow-y: scroll;
}
小提琴:http://jsfiddle.net/mehmetatas/18dpgqpb/2/
这篇关于按百分比设置引导模式体高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文