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/