我正在尝试制作一个模态框,当内容变得太大时,它会滚动。但是,我希望模式能够响应屏幕尺寸。当我将最大高度设置为 40% 时,它没有任何效果。但是,如果我将 max-height 设置为 400px,它会按预期工作,但没有响应。我确信我只是遗漏了一些简单的东西,但我似乎无法让它发挥作用。
这是一个 example
不起作用:
.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;
}
关于html - 按百分比设置 Bootstrap 模态主体高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24166568/