CSS 如何限制模态的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28791970/
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
How to limit the height of the modal?
提问by georg
I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:
我正在寻找一种将模态对话框保持在屏幕边界内的方法，即它的高度始终小于屏幕高度，并且相应地调整宽度。我试过：
.modal-dialog {
max-height: 100%;
}
but this doesn't seem to have any effect.
但这似乎没有任何效果。
An illustration:
一个例证：
I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).
如果存在，我更喜欢纯 CSS 解决方案（无 js）。为清楚起见，我正在寻找最大高度，而不是高度（即模式不高于屏幕，保持原样）。
回答by Danield
Use viewport unitswith calc. Like this:
将视口单位与calc. 像这样：
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
...其中 225px 对应于围绕对话框的视口的顶部和底部部分的组合高度。
Also, in order to take care of the width of the modal we need to set a few more properties:
此外，为了处理模态的宽度，我们需要设置更多属性：
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle(Resize the viewport height to see the effect)
更新的小提琴（调整视口高度以查看效果）
Alternatively:
或者：
We can replace calcwith a padding + negative margin technique like so:
我们可以calc用填充 + 负边距技术替换，如下所示：
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
小提琴
PS:browser support for viewport units is very good
PS：浏览器对视口单位的支持非常好
回答by Richie Fredicson
回答by Herman Nz
Since the default value set to auto and 100% in width and height. you just be able to modify; the image inside the viewport and the target ID, as follows:
由于默认值设置为 auto 和 100% 的宽度和高度。你只能修改；视口内的图像和目标ID，如下：
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
Here's the DEMOin jsfiddle.
这是jsfiddle中的DEMO。
You also can separate it into, as follows:
您也可以将其拆分为，如下所示：
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
UPDATED DEMO:
更新的演示：
回答by Achilles
If you ensure that the parent elements have a height set, then you should be able to do it pretty easily. I have given the header and footer 10 percent heights hear and the body 80 percent so that it all adds up to 100 :)
如果您确保父元素设置了高度，那么您应该能够很容易地做到这一点。我给了页眉和页脚 10% 的高度和 80% 的正文，这样它们加起来就是 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}
回答by Juan J
Target the modal-bodyand not the modal-dialog.
目标是modal-body而不是modal-dialog。
Add the following to your CSS:
将以下内容添加到您的 CSS：
max-height: 80vh;
overflow-y: auto;
It should look like this:
它应该是这样的：
.modal-body {
max-height: 80vh; overflow-y: auto;
}
Adjust the VH height to preference.
根据喜好调整 VH 高度。
回答by Ranjitsinh
If you provide max-height and max-width to 100% then it will take automatically accordingly screen but as you want this dialog size smaller then you will have to set max-height and max-width to some fix value. As you have already used responsive model dialog so it will change dialog size automatically as per your screen size.
如果您将 max-height 和 max-width 设置为 100%，那么它将自动采用相应的屏幕，但由于您希望此对话框尺寸更小，因此您必须将 max-height 和 max-width 设置为某个固定值。由于您已经使用了响应式模型对话框，因此它会根据您的屏幕大小自动更改对话框大小。
Try following css it may work as per your requirement. you can change max-height and max-width accordingly, margin-left and margin-right used for center align.
尝试遵循 css 它可能会根据您的要求工作。您可以相应地更改 max-height 和 max-width，用于居中对齐的 margin-left 和 margin-right。
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Hope it may help you.!!
希望可以帮到你。！！
回答by Kanti
回答by Amit
Try working Fiddlewith some csschanges.
尝试使用一些css更改来处理Fiddle。
css:
css：
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
回答by David Vartanian
I think you should use overflow: hidden on .modal-dialog, with a style to mantain the image proportion.
我认为你应该使用overflow: hidden on .modal-dialog，用一种风格来保持图像比例。
