如何限制模态的高度？

Question

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

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

但这似乎没有任何影响.

http://jsfiddle.net/ma4zn5gv/

举例说明:

如果它存在,我更喜欢纯CSS解决方案(没有js).为了清楚起见,我正在寻找最大高度,而不是高度(即模态不高于屏幕,保持原样).

Answer 1

使用视口单位用calc.像这样:

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

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

另外,为了处理模态的宽度,我们需要设置更多属性:

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

更新小提琴(调整视口高度以查看效果)

或者:

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

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

小提琴

PS:浏览器对视口单元的支持非常好

Answer 2

目标是modal-body而不是modal-dialog。

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

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

它应该是这样的：

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

根据喜好调整 VH 高度。