jquery Change Child Deminsions to match Parents after resize

Question

I have a parent div with a child div inside. The parent div is using jquery Ui resizable. How can i make the child div inherent the parent div dimensions in real time when parent div is resized.

Here's what i have http://jsfiddle.net/dtxhe/7/

After resize, the child div is not resizing according to it's parent.

Answer 1

You can also use this :

http://jsfiddle.net/dtxhe/11/

Code :

$("#container").resizable({ alsoResize: '#child' });

Answer 2

You need to utilize the resize event of the resizable object.

http://jsfiddle.net/dtxhe/10/

$("#container").resizable({
   resize: function(event, ui) {
       var parentwidth = $("#container").innerWidth();
       var parentheight = $("#container").innerHeight();
       $("#child").css({'width':parentwidth, 'height':parentheight});
   }
});