当前位置：文江博客话题详情

当子div高度改变时Jquery自动展开父div

发布于 2024-10-15 00:22:42 字数 214 浏览 5 评论 0原文

当内部 #child contenteditable div 超过父 div 的高度时，让父 #container div 自动调整高度的最简单方法是什么。

这是例子。 http://jsfiddle.net/ULUJX/ 尝试在 #child div 内键入，直到高度超过父 div。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气尐潴 2024-10-22 00:22:42

我会跟踪 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/ambigously/ULUJX/10/

如果您也希望它缩小，那么只需更改 if< /code> 并注意事物的初始大小。

I'd track keyup events and watch the height of #child, for example:

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

Here's an updated version of your jsfiddle: http://jsfiddle.net/ambiguous/ULUJX/10/

If you want it to shrink as well then simply change the if and take care with the initial sizes of things.

回复收藏 0 原文

虫児飞 2024-10-22 00:22:42

我正在测试这个，效果很好，

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

i was testing out this and it works good

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

you can change the speed to update the height faster but if your going to use it in a editable box it would be better to use a event trigger like

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

回复收藏 0 原文

~没有更多了~