jquery - 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

次のように、サイズ変更イベントにバインドする必要があります: http://jsfiddle.net/bWMxm/2/