jquery - 如何在不使用 overflow hidden 的情况下限制响应式设计中模态的高度？

Question

显然，Bootstrap 模态视图高度没有响应。 [示例可在此处找到] ( http://getbootstrap.com/javascript/#modals ) 我希望我的模态高度根据用户设备尺寸的选择而变小。不使用怎么实现呢

overflow: hidden;

这似乎切断了模态内容。我也不想使用 overflow-y: scroll;

@media (min-width: 900px) {
    .my-dialog .modal-dialog {
        width: 900px;
        max-height: 750px;
        overflow: hidden;
    }
}

Answer 1

不知道大家有没有听说过CSS长度单位vh、vw、vmin、vmax。它们可能是您问题的解决方案。

来自 <length> - CSS | MDN来自 Mozilla 开发者网络:

• 1vw = 视口(viewport)宽度的 1%。
• 1vh = 视口(viewport)高度的 1%。
• 1vmin = 视口(viewport)高度和宽度之间的最小值的 1%。
• 1vmax = 视口(viewport)高度和宽度之间最大值的 1%。

在您的情况下，您正在寻找的是单元 vh。

您可能需要检查 browser support table for the viewport units虽然。