使JQuery對話框內容100％的寬度和高度

我創建一個div，然後在對話框中打開它。我嘗試過這個div的樣式，以實現內容將在兩個方向上擴展到100％。使JQuery對話框內容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/

來源

2013-02-28 Jacob

爲了讓內容擁有100％的高度，這個高度必須在html和body標籤規定：

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

而且，設置auto並不一定意味着寬度和/或高度將是100％。同樣，舊版本的IE不支持width: auto;和height: auto;

如果可能的話，你不應該使用!important覆蓋現有的樣式，無論是。

JSFiddle example。

來源

2013-02-28 10:32:04

不知道爲什麼這是downvoted ...我甚至提供了一個工作的例子！ – 2013-02-28 10:43:56

是的，你的方法很好。我有反向投票 – harryg 2013-02-28 10:47:08

html，body屬性和刪除重要的沒有辦法！ – Jacob 2013-02-28 11:04:55

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

來源

2013-02-28 10:40:57 harryg

「我想通過CSS實現這一點。」..沒有jQuery請.. – 2013-02-28 10:41:47

@詹姆斯答案很好。因爲它是一個對話框，我們假設它通過'display：relative'或'absolute'定位在頁面上其他內容的頂部。小提琴會很高興看到一個示例 – harryg 2013-02-28 10:48:45

您已經在使用jQuery來調用對話框。爲什麼不使用上述方法同時應用其高度和寬度？看到這個小提琴：http：// jsfiddle。淨/ URpmR/ – harryg 2013-02-28 12:03:12

設置width選項到'auto'在此發現Answer

來源

2016-06-06 23:33:58

使JQuery對話框內容100％的寬度和高度

回答

相關問題