javascript - ajax调用后jQuery动态调整div的大小

Question

我正在尝试扩展一个 div 以适应文本，而无需指定确切的高度。我尝试使用类似的东西。

$('#div').addClass('myclass');

myclass 有一个 height:auto;但这是行不通的。我不知道如何从返回文本的 ajax 调用中相应地扩展 div。

这是主要的CSS类

.pro_input{ 
    border-top:2px solid #919191;
    border-left:1px solid #CBCBCB;
    border-right:1px solid #CBCBCB;
    border-bottom:1px solid #CBCBCB;
    width:530px;
    background-color:#F2F2F2;
    height:72px;    
 }
 .pro_attach{
     height:auto;
  }

我只是想在 ajax 响应后自动设置高度。文本可以很少或很多。所以我需要它相应地扩展。我使用 addclass 将其更改为其他内容，但将其与带有 pro_attach 的 jQuery addclass 一起使用不起作用。

谢谢

Answer 1

只需要这样做:
在要使用 ajax 加载文本的 div 周围包裹一个 limit div:

<div id="limit">
    <div id="div"> ajaxed load text </div>
</div>

给#limit div 一个隐藏的溢出:

#limit { position: relative; overflow: hidden; }

最后，在使用 ajax 加载文本后，始终将#limit 高度调整为#div 的高度:

$("#limit").css({
    height: $("#div").height()
});

这是一样的，只是动画:

$("#limit").animate({
    height: $("#div").height()
},600);

脚本检查#div 的高度并将其交给#limit，这就是诀窍。