jquery更改孩子deminsions匹配父母后调整大小

Question

我有一个父div与子div内。父div使用jquery Ui可调整大小。当父div被调整大小时，如何实时生成父div的尺寸。

这里就是我有 http://jsfiddle.net/dtxhe/7/

调整大小后，孩子的div不调整根据它的父。

Answer 1

您也可以使用此：

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

代码：

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

Answer 2

您需要利用可调整大小的对象的resize事件。

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

Answer 3

可以改变孩子的大小在$ .resize事件，以适应父。 如（改变了代码，减少jQuery选择电话）：

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

工作例如：http://jsfiddle.net/Chandu/dtxhe/9/

Answer 4

您必须绑定到调整大小事件，像这样：http://jsfiddle.net/bWMxm/2/