Jquery Auto раскрывает родительский div при изменении высоты дочернего элемента div

Question

Какой самый простой способ заставить родительский div #container автоматически регулировать высоту, когда внутренний contenteditable div #child превышает высоту родительского div.

Вот пример. http://jsfiddle.net/ULUJX/ Попробуйте набрать внутри #child div, пока высота не превысит родительский div.

Answer 1

Я бы отслеживал keyup события и наблюдал бы высоту #child, например:

var $child = $('#child');

var $container       = $('#container');
var container_height = $container.height();
$container.resizable();

$child.keyup(function() {
    var h = $child.height();
    if(h > container_height) {
        $container.height(h);
        container_height = h;
    }
});

Вот обновленная версия вашего jsfiddle: http://jsfiddle.net/ambiguous/ULUJX/10/

Если вы хотите уменьшить его, просто измените if и позаботьтесь о начальных размерах вещей.

Answer 2

Я проверял это, и это хорошо работает

(function heightFix($){
    var parentCon = $('#container'),
        child = $('#child').height();
    if(parentCon.height() < child){
       parentCon.height(child)
    }
    setTimeout(function(){
        heightFix($);
    },100)
}(jQuery));

Вы можете изменить скорость, чтобы обновить высоту быстрее, но если вы собираетесь использовать ее в редактируемом окне, было бы лучше использовать триггер события, например

$('#child').live('keypress', function(){
    var parentCon = $('#container'),
        child = $(this).height();
    if(parentCon.height() < child){
       parentCon.height(child)
    }
});