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

以下是您的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)
    }
});

当子div高度改变时，Jquery Auto展开父div

2 个答案: