Javascript 限制JQuery UI对话框小部件的大小？

包含大量文本的JQuery UI对话框小部件太大，对话框不适合窗口（用户必须滚动浏览器窗口；用户体验：“这是一个bug”）：

将“高度”选项设置为“自动”没有帮助，对话框仍然不适合窗口：

$("#div_dialog").dialog({title: "Header", width: 'auto', height: 'auto'});

将初始大小设置为固定值将起作用

$("#div_dialog").dialog({title: "Header", width: 100, height: 100});

... 但这也不是我想要的。
如果有必要，小部件的大小应该增加（基于内容），但不能超出窗口

基本上，我在寻找这样的东西（“90%”不起作用，因为需要以像素为单位的数值）：

这可能真的很简单，但我似乎找不到正确的选项…

您可以使用

$（window）.height（）*0.9

获得90%的窗口，并在对话框打开时动态设置最大高度（以防窗口被调整大小/旋转）

和。。当对话框没有固定高度（高度：自动）时，它看起来不尊重maxHeight属性，所以您可以通过maxHeight css属性设置它，在您第一次调整对话框大小后，它应该获得固定高度，maxHeight将从那时起起工作

$("#div_dialog").dialog({
    title: "Header", 
    maxHeight:$(window).height() * 0.9,
    open:function(event, ui){
        $(this).css("max-height", $(window).height() * 0.9);
    }
});

---

默认情况下，

height

属性为

auto

，因此对话框将根据其内容自动增长

您可以将

height

和

maxHeight

设置为窗口的百分比，如：

$(function () {
    $("#div_dialog").dialog({
        title: "Header",
        height: $(window).height() * .2,
        maxHeight: $(window).height() * .2
    });
});

---

演示：maxHeight:

我认为问题在于如何使对话高度

自动

，除非超过一定大小<代码>高度：$（窗口）.height（）*.2禁用了

自动

功能，不是吗？

$("#div_dialog").dialog({
    title: "Header", 
    maxHeight:$(window).height() * 0.9,
    open:function(event, ui){
        $(this).css("max-height", $(window).height() * 0.9);
    }
});

$(function () {
    $("#div_dialog").dialog({
        title: "Header",
        height: $(window).height() * .2,
        maxHeight: $(window).height() * .2
    });
});