jquery在调整大小后更改子维度以匹配父级

Question

我有一个带有子div的父div。父div使用jquery Ui可调整大小。当父div调整大小时，如何使子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

您必须绑定到resize事件，如下所示：http://jsfiddle.net/bWMxm/2/