如何限制模态框的高度？

Question

我正在寻找一种将模态对话框保持在屏幕边界内的方法，即它的高度始终小于屏幕高度，并且相应地调整宽度。我试过了：

.modal-dialog {
  max-height: 100%;
}

不过这个好像没什么效果

http://jsfiddle.net/ma4zn5gv/

插图：

如果存在，我更喜欢纯 CSS 解决方案（无 js）。为清楚起见，我正在寻找最大高度，而不是高度（即模态不高于屏幕，保持原样）。

Answer 1

将 viewport units 与 calc 结合使用。像这样：

.img-responsive {
    max-height: calc(100vh - 225px);
}

...其中 225px 对应于对话框周围视口的顶部和底部部分的组合高度。

此外，为了处理模态框的宽度，我们需要设置更多属性：

.modal {
    text-align:center;
}
.modal-dialog {
    display: inline-block;
    width: auto;
}

Updated Fiddle（调整视口高度看效果）

或者：

我们可以用填充 + 负边距技术替换 calc，如下所示：

.img-responsive {
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;
}

FIDDLE

PS: 浏览器对视口单位的支持是 very good

Answer 2

如果您确保 parent 元素设置了高度，那么您应该能够很容易地做到这一点。我给了 header 和页脚 10% 的高度，body 80%，这样它们加起来就是 100 :)

.modal, .modal-dialog, .modal-content{
  height: 100%;

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}

Answer 3

我认为你应该在 .modal-dialog 上使用 overflow: hidden，并使用一种样式来保持图像比例。

Answer 4

如果您将 max-height 和 max-width 设置为 100%，那么它会自动相应地显示屏幕，但如果您希望此对话框尺寸更小，那么您必须将 max-height 和 max-width 设置为某个固定值. 由于您已经使用了响应式模型对话框，因此它会根据您的屏幕大小自动更改对话框大小。

尝试遵循 css 它可能会根据您的要求工作。您可以相应地更改 max-height 和 max-width，margin-left 和 margin-right 用于居中对齐。

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

希望对您有所帮助！！

Answer 5

脚本

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});

Fiddle

Answer 6

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

Answer 7

因为默认值设置为自动并且宽度和高度设置为 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;
}

这是jsfiddle中的DEMO。

也可以拆分成，如下：

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

已更新DEMO:

Answer 8

先固定容器大小，再设置模态对话框大小。

例如：

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

Fiddle

Answer 9

定位 modal-body 而不是 modal-dialog。

将以下内容添加到您的CSS：

max-height: 80vh;
overflow-y: auto;

它应该是这样的：

.modal-body {
    max-height: 80vh; overflow-y: auto;
}

根据喜好调整 VH 高度。

如何限制模态框的高度？

How to limit the height of the modal?

css

responsive-design

twitter-bootstrap-3

Updated Fiddle（调整视口高度看效果）

或者：

FIDDLE