Make JQuery dialog content 100% width and height

Question

I create a div and then open it in a dialog. I've tried styling this div to achieve that the content would expand to 100% in both directions.

What have I tried so far: Setting the div style

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

and setting the default div style

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

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

Nothing seems to work! I overrides the width propertie but cannot override the height propertie. How to hack this?

I want to achieve something like this: http://jsfiddle.net/S3FQv/

Answer 1

You could use the jQuery width and height properties to get the pixel width of the viewport and apply those as a style to the 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
});

See this fiddle: http://jsfiddle.net/URpmR/2/

You should also add some extra code to reexecute the function should the user change the size of his browser:

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

Answer 2

In order for content to have 100% height, this height must be specified on the html and body tags:

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

Also, setting auto doesn't necessarily mean the width and/or height will be 100%. Equally, older versions of IE do not support width: auto; and height: auto;

If possible you shouldn't use !important to overwrite existing styles, either.

JSFiddle example.