Jquery Auto expand div div div when sub div height changed

Question

當內部#child contenteditable 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; 
    } 
}); 

如果你想讓它收縮以及再簡單地改變 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) 
    } 
});