按百分比设置bootstrap模态体高

Question

我正在尝试使用一个在内容变得太大时滚动的主体.但是,我希望模态能够响应屏幕大小.当我将max-height设置为40%时,它没有任何效果.但是,如果我将max-height设置为400px它按预期工作,但没有响应.我确信我只是遗漏了一些简单的东西,但我似乎无法让它发挥作用.

这是一个例子

不起作用:

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

作品:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}

Answer 1

这对我有用

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

小提琴:http://jsfiddle.net/mehmetatas/18dpgqpb/2/

Answer 2

单位vh不是使用%,而是将其设置为视口(浏览器窗口)大小的百分比.

我能够设置一个带有图像和文本的模态,以便使用vh响应浏览器窗口大小.

如果您只想滚动内容,则可以省略限制模态主体大小的部分.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}

Answer 3

这适用于所有人,任何屏幕分辨率:

.modal-body {
    max-height: calc(100vh - 143px);
    overflow-y: auto; }

首先,计算你的模态页眉和页脚高度,在我的情况下我有H4标题所以我有它们141px,已经计入默认模态边距20px(top+bottom).

所以减去141px是max-height我的模态高度,为了更好的结果,有边框顶部和底部1px,为此,143px将完美地工作.

在某些样式的情况下,您可能想要使用overflow-y: auto;而不是overflow-y: scroll;尝试它.

试试吧,您可以在计算机或移动设备上获得最佳效果.如果您的标题大于H4,请重新计算它,看看px您想要减去多少.

如果您不知道我在说什么,只需更改数量143px,看看您的案例的最佳结果是什么.

最后,我建议使用内联CSS.