我正在尝试制作一个带有正文的模式，当内容变得太大时会滚动。但是，我希望模态能够响应屏幕尺寸。当我将最大高度设置为 40% 时，它没有任何效果。但是，如果我将 max-height 设置为 400px，它会按预期工作，但没有响应。我确定我只是缺少一些简单的东西，但我似乎无法让它工作。
这是example
不起作用：
.modal-body {
max-height:40%;
overflow-y: auto;
}
作品：
.modal-body {
max-height:400px;
overflow-y: auto;
}
【问题讨论】：
标签： html css twitter-bootstrap modal-dialog
这对我有用
.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;
}
【讨论】：
max-height: calc(100% - 120px); overflow-y: scroll;替换为max-height: calc(100vh - 210px); overflow-y: auto;
单位 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;
}
【讨论】：
overflow: scroll;强制滚动条？好奇
overflow: scroll;。如果您只想在滚动条过长时显示滚动条，则可以使用 overflow: auto;。
modal-body上，这样它就不会滚动模态的标题。
overflow 从 modal-content 移动到 modal-body。这样，您可以在页眉和页脚保持原位的同时滚动模态框的正文。
这应该适用于所有人，任何屏幕分辨率：
.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。
【讨论】：
毫无疑问，您现在已经解决了这个问题，或者决定做一些不同的事情，但由于没有得到解答，我在寻找类似的东西时偶然发现了这个问题，我想我会分享我的方法。
我已经开始使用两个 div 集。一个有 hidden-xs，用于 sm、md 和 lg 设备查看。另一个有 hidden-sm、-md、-lg 并且仅适用于移动设备。现在我可以更好地控制 CSS 中的显示了。
您可以在js fiddle 中看到一个粗略的想法，我将页脚和按钮设置为在分辨率为 -xs 大小时更小。
<div class="modal-footer">
<div class="hidden-xs">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div class="hidden-sm hidden-md hidden-lg sml-footer">
<button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-xs btn-primary">Save changes</button>
</div>
</div>
【讨论】：
Bootstrap 4.0 的 scss 解决方案
.modal {
max-height: 100vh;
.modal-dialog {
.modal-content {
.modal-body {
max-height: calc(80vh - 140px);
overflow-y: auto;
}
}
}
}
确保.modal max-height 是100vh。然后对于.modal-body 使用calc() 函数来计算所需的高度。在上述情况下，我们希望占据视口的80vh，并减少页眉和页脚的大小（以像素为单位）。这大约是 140 像素，但您可以轻松测量它并应用您自己的自定义值。 对于更小/更高的模态，请相应地修改 80vh。
【讨论】：
这就是解决办法
.modal-dialog{
height:100%
}
.modal-content{
height:90%
}
.modal-body{
height:100%;
overflow:auto
}【讨论】：