當子div高度更改時，jQuery自動擴展父div

Question

當內部#child可內容編輯的div超出父div的高度時，使父#container 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)
    }
});