jquery Change Child Deminsions to match Parents after resize

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.

---

You can also use this :

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

Code :

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

---

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});
   }
});

---

You can change the size of the child to fit parent in the $.resize event. e.g(changed the code to reduce jquery selector calls):

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

Working example: http://jsfiddle.net/Chandu/dtxhe/9/

---

You must bind to the resize event, like so: http://jsfiddle.net/bWMxm/2/