jquery Изменить дочерние Deminsions, чтобы соответствовать Родителям после изменения размера

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/