使 JQuery 对话框内容占据100%的宽度和高度

Question

我创建了一个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/

- Jacob

Answer 1

你可以使用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());

- harryg

---

@James的答案很好。由于这是一个对话框，我假设它通过display:relative或absolute在页面上方定位其他内容。看到一个示例的fiddle会很不错。 - harryg

你已经在使用jQuery来调用对话框了。为什么不同时使用上面的方法来应用它的高度和宽度呢？看一下这个示例：http://jsfiddle.net/URpmR/ - harryg

我在Jacob之前的问题中给出了同样的建议，链接为http://stackoverflow.com/questions/15132096/style-jquery-dialog-content-div#comment21299126_15132096。 - Sudip Pal

做得好，我知道你花了时间。感谢你的努力。 - Sudip Pal

Answer 2

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

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

此外，设置auto并不一定意味着宽度和/或高度将为100%。同样，旧版本的IE不支持width: auto;和height: auto; 如果可能，也不应使用!important来覆盖现有样式。 JSFiddle示例。

- James Donnelly

---

不知道为什么这个被踩了...我甚至提供了一个可行的例子！ - James Donnelly

HTML、Body属性以及去除important都无济于事！ - Jacob

我猜你使用了 !important 来确保这些样式覆盖了现有的样式。把 !important 加回去，看看是否有效。如果不行，确保你的对话框没有被包含在一个高度和宽度小于100%的容器中。 - James Donnelly

如果将值设置为"px"，则可以成功覆盖高度值，但在百分比或值：自动的情况下无效。 - Jacob

也许是这个？http://jsfiddle.net/S3FQv/19/ 我不确定你是否想要调整大小。 - James Donnelly

Answer 3

将 width 选项设置为 'auto'，如此 Answer 上所示。

- Muhammad Omar ElShourbagy