使 JQuery 对话框内容的宽度和高度为 100%答案

【问题标题】：Make JQuery dialog content 100% width and height使 JQuery 对话框内容的宽度和高度为 100%
【发布时间】：2013-02-14 12:01:45
【问题描述】：

我创建了一个 div，然后在对话框中打开它。我尝试设计这个 div 以实现内容在两个方向上都扩展为 100%。

到目前为止我尝试了什么：设置 div 样式

#content {
    width:auto !important;
    height:auto !important;
    background-color:red !important;
    display:block !important;
}

并设置默认的 div 样式

$(div).dialog({ dialogClass: 'someStyle' });

.someStyle .ui-dialog-content 
{
    height:auto !important;
    display:block !important;
}

似乎没有任何效果！我覆盖了宽度属性，但不能覆盖高度属性。如何破解这个？

我想实现这样的目标：http://jsfiddle.net/S3FQv/

【问题讨论】：

标签： jquery css dialog height width

【解决方案1】：

将width 选项设置为'auto'，如在此Answer 上找到的那样

【讨论】：

【解决方案2】：

您可以使用 jQuery width 和 height 属性来获取视口的像素宽度并将它们作为样式应用到 div

var w = $(window).width();
var h = $(window).height();

//Set up the dialog with the width and height set above.
$('#myDialog').dialog({
    title: 'My Dialog',
    height: h,
    width: w
});

看到这个小提琴：http://jsfiddle.net/URpmR/2/

如果用户更改浏览器的大小，您还应该添加一些额外的代码来重新执行该函数：

$(window).resize(myFunction());

【讨论】：

@James 的回答很好。由于它是一个对话框，我假设它通过display:relative 或absolute 位于页面上其他内容的顶部。一个小提琴会很高兴看到一个例子
您已经在使用 jQuery 来调用对话框。为什么不使用我上面的方法同时应用它的高度和宽度。看到这个小提琴：jsfiddle.net/URpmR
我在 Jacob 上一个问题 stackoverflow.com/questions/15132096/… 中建议过同样的事情
干得好，我知道你已经花时间在这上面了。赞赏。

【解决方案3】：

为了使内容具有 100% 的高度，必须在 html 和 body 标签上指定此高度：

html, body { height:100%; margin:0; padding:0; }

另外，设置auto 并不一定意味着宽度和/或高度将为 100%。同样，旧版本的 IE 不支持 width: auto; 和 height: auto;

如果可能，您也不应该使用 !important 覆盖现有样式。

JSFiddle example.

【讨论】：

不知道为什么这被否决了...我什至提供了一个工作示例！
html、body 属性和删除重要的东西都不起作用！
好吧，我假设您使用!important 来确保这些样式覆盖现有样式。重新添加!important 看看它是否有效。如果不是，请确保您的对话框未包装在设置为高度和宽度小于 100% 的容器中。
jsfiddle.net/S3FQv/19 也许？但是，我不确定这是否是您想要调整大小的原因。