按百分比设置引导模态体高度-前端问题

Set bootstrap modal body height by percentage(按百分比设置引导模态体高度)

本文介绍了按百分比设置引导模态体高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试制作一个带有正文的模式，当内容变得太大时会滚动.但是，我希望模态能够响应屏幕尺寸.当我将最大高度设置为 40% 时，它没有效果.但是，如果我将 max-height 设置为 400px，它会按预期工作，但没有响应.我确定我只是错过了一些简单的东西，但我似乎无法让它发挥作用.

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can't seem to get it to work.

这是一个示例

不起作用:

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

作品:

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

推荐答案

这对我有用

.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/

这篇关于按百分比设置引导模态体高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！