jquery在调整大小后更改子尺寸以匹配父母答案

【问题标题】：jquery Change Child Deminsions to match Parents after resizejquery在调整大小后更改子尺寸以匹配父母
【发布时间】：2011-01-27 21:11:25
【问题描述】：

我有一个父 div，里面有一个子 div。父 div 使用 jquery Ui 可调整大小。当父 div 调整大小时，如何使子 div 实时固有父 div 尺寸。

这就是我所拥有的 http://jsfiddle.net/dtxhe/7/

调整大小后，子 div 不会根据其父级调整大小。

【问题讨论】：

标签： jquery parent resizable

【解决方案1】：

你也可以用这个：

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

代码：

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

【讨论】：

+1，这很好，很干净。我们其他人正在复制 jQuery UI 已经提供的功能。

【解决方案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});
   }
});

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

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

【讨论】：