根据当前屏幕窗口大小为我的模态窗口设置最大高度答案

【问题标题】：set max-height for my modal window based on the current screen window size根据当前屏幕窗口大小为我的模态窗口设置最大高度
【发布时间】：2015-02-02 22:36:35
【问题描述】：

我有以下脚本，它将为我的局部视图显示一个模式窗口：-

$(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

我设置了以下css：-

#myModalContent {
   max-height: 400px;
   overflow-y: auto;
}

但是假设在小尺寸窗口上，如果实际屏幕尺寸小于此值（例如在移动屏幕中），则 400 像素的最大高度将不一致。所以我的问题是如何将模态窗口的最大高度设置为当前屏幕尺寸的 80%？

谢谢

【问题讨论】：

标签： javascript jquery html css razor

【解决方案1】：

$("#myModalContent).css("max-height", screen.height * .80);怎么样

这可能行得通

【讨论】：

在 .load 之前如何在我的情况下应用它？
我试过这个 $('#myModalContent').css("max-height", screen.height * .80).load(this.href, function () { 它通过最小化来工作模态大小为 80% 但我没有得到任何滚动条，因此我将以下内容定义为 css 规则 #myModalContent { overflow-y: auto; }。但我不确定是否可以在里面应用 overflow:auto脚本还有吗？
好吧，用 .css("max-height", screen.height * .80) 代替 .css({ "max-height": screen.height * .8, "overflow-y ": "自动" })...

【解决方案2】：

只需在样式表中使用 % insted of px

【讨论】：

我试过这个#myModalContent { max-height: 70%;溢出-y：自动； } 但这不会显示任何滚动条，

【解决方案3】：

对于纯 css 解决方案。

#modalname .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

这里 100vh-> 100% 的高度。 200px 是模态页眉和页脚使用的大约组合空间（高度）。

css解决方案比js更好，因为在窗口大小变化上，它会直接调整模态的高度。

【讨论】：