如何在不使用溢出隐藏的情况下限制响应式设计中的模态高度？

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。它们可以解决您的问题。

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

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

在您的情况下，您要找的是单位vh。

您可能需要查看browser support table for the viewport units。