如何限制模态框的高度？

Question

如何限制模态框的高度？

41

我正在寻找一种方法，可以使模态对话框始终保持在屏幕范围内，即其高度始终小于屏幕高度，并相应地调整其宽度。我尝试了：

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

但这似乎没有任何效果。

http://jsfiddle.net/ma4zn5gv/

一个示例：

输入图像描述

如果存在纯CSS解决方案（无js），我更喜欢它。为了清晰起见，我要寻找的是max-height而不是height（即模态框不能比屏幕更高）。

- georg

有没有不使用别人的jQuery插件的理由？在Google上搜索“响应式模态框”会出现许多选项，我99%确定其中一个会满足您的需求。 - henry

9个回答

11

将焦点放在modal-body而不是modal-dialog上。

在您的CSS中添加以下内容：

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

应该长成这个样子：

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

根据个人喜好调整 VH 高度。

- Juan J

模态框主体需要被选中，而不是包括模态框头部和底部的整个元素，其原因是什么？ - Hashim Aziz

仅仅是基于我自己的实验猜测，但整个模态框可能会被定位。不同之处在于页头和页脚不会“粘”在顶部和底部（它将随内容滚动），这可能不是期望的行为。此外，定位到模态框内容不会“缩小”内容的视窗，因为它默认为display:flex。 - Joe Sadoski

3

脚本

$('#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

- Richie Fredicson

3

默认情况下，宽度和高度的默认值被设置为自动和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：https://jsfiddle.net/Alicera/wqrno8h1/1/。

您也可以将其分解为以下内容：

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

更新的演示：

- Joe Kdw

如果您将图像设置为img-responsive，则上述代码中.modal-dialog img的更改不会导致宽度和高度显示不良。 - Joe Kdw

2

如果您确保父元素已设置高度，则应该可以轻松完成。我在此处为标题和页脚分别设置了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%;
}

- Achilles

1

图片在Chrome和Firefox中仍然超出模型范围：jsFiddle - Rison

抱歉，这段代码需要将段落的高度设置为100％。我在这里更新了代码。[jsFiddle]（http://jsfiddle.net/zt0jn1c0/）.modal-content p{ height: 100%; } - Achilles

此外，如果模态框的最外层父级元素设置了max-height，则模态框也应在其中进行压缩。关键是要确保最顶层的父级元素的高度只能与浏览器一样高。 - Achilles

2

首先确定容器大小，然后设置模态框大小。

例如：

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

Fiddle

- Kanti

1

如果您将最大高度和最大宽度设置为100％，它将根据屏幕自动调整大小，但是如果您希望此对话框尺寸更小，则必须将最大高度和最大宽度设置为某个固定值。由于您已经使用了响应式模态对话框，因此它会根据您的屏幕尺寸自动更改对话框大小。

请尝试以下CSS，它可能可以按照您的要求工作。您可以相应地更改最大高度和最大宽度，margin-left和margin-right用于居中对齐。

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

希望它能对你有所帮助。!!

- Ranjitsinh

你能发布一个 JSFiddle 吗？ - georg

1

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

- Amit

图片向左转了 :p - Joe Kdw

OP 需要限制模态对话框，而不是图像 :D - Joe Kdw

0

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

- David Vartanian

你能发布一个 JSFiddle 吗？ - georg

很遗憾，你说得对，这比我想象的要难！我已经尝试了一段时间，但没有成功，抱歉... 不过也许这个链接能帮到你：http://appendto.com/2014/03/responsive-approach-image-scaling-css/ - David Vartanian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

使用视窗单位结合 calc 使用。像这样：

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

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

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

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

更新的 Fiddle（调整视口高度以查看效果）

或者：

我们可以用 padding + 负边距技术代替 calc，代码如下：

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

FIDDLE

PS: viewport单位的浏览器支持非常好，详见