按百分比设置bootstrap模式主体高度
按百分比设置bootstrap模式主体高度
提问于 2014-06-11 23:14:35
我正在尝试与一个身体，将滚动时，内容变得太大的模式。但是，我希望模式能够响应屏幕的大小。当我将最大高度设置为40%时，它没有任何效果。但是，如果我将max-height设置为400px，它会按预期工作，但没有响应。我确信我只是错过了一些简单的东西，但我似乎不能让它工作。
这是一个example
不起作用：
.modal-body {
max-height:40%;
overflow-y: auto;
}作品：
.modal-body {
max-height:400px;
overflow-y: auto;
}回答 5
Stack Overflow用户
发布于 2014-09-28 04:31:21
这对我很有效
.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;
}Stack Overflow用户
发布于 2016-03-03 23:31:32
单位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;
}Stack Overflow用户
发布于 2017-05-29 16:30:38
这应该适用于任何人，任何屏幕分辨率：
.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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24166568
复制相关文章
相似问题