Jquery Auto expand子divの高さが変更されたときの親div

Question

#child contenteditableの内側のdivが親divの高さを超えると、親の#container divを自動的に高さに調整する最も簡単な方法は何ですか？

例を示します。 http://jsfiddle.net/ULUJX/ 高さが親divを超えるまで、#child 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; 
    } 
}); 

あなたは、それは、単に ifを変更して、物事の初期サイズの世話をするだけでなく縮小したい場合は http://jsfiddle.net/ambiguous/ULUJX/10/

：

はここにあなたのjsfiddleの更新されたバージョンです。

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) 
    } 
});