如何限制模态的高度?

时间:2015-03-01 09:28:25

标签: css twitter-bootstrap-3 responsive-design

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

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

但这似乎没有任何效果。

http://jsfiddle.net/ma4zn5gv/

插图:

enter image description here

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

9 个答案:

答案 0 :(得分:54)

viewport unitscalc一起使用。像这样:

.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

答案 1 :(得分:3)

由于默认值设置为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;
}

这里是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

答案 2 :(得分: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%;
}

答案 3 :(得分:2)

<强>脚本

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

答案 4 :(得分:1)

如果您将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;
    }

希望它可以帮助你。!!

答案 5 :(得分: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;
}

答案 6 :(得分:1)

首先修复容器大小,然后设置模态对话框大小。

例如:

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

Fiddle

答案 7 :(得分:1)

定位modal-body而非modal-dialog

将以下内容添加到CSS中:

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

它应该是这样的:

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

根据喜好调整VH高度。

答案 8 :(得分:0)

我认为你应该使用overflow:隐藏在.modal-dialog上,用一种风格来保持图像的比例。