jQuery调用ajax后动态调整div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我正在尝试扩展一个div,以适应文本,而不必指定一个确切的hegiht。我尝试使用类似的东西。

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

随着myclass有一个高度:自动; 但那不行。我不知道如何让它从一个返回文本的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来改变它的其他东西,但使用它与jQuery的addclass pro_attach不起作用。

提问于
用户回答回答于

只需这样做:

在要用Ajax加载文本的div周围包装一个限制div:

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

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

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

最后,在用Ajax加载文本之后的任何时候,将#div的限制高度与#div的高度相匹配:

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

这是一样的,只是动画:

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

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

用户回答回答于

假设:最初,DV中没有任何内容。稍后,将文本添加到div中。

假设div的id是‘abc’,当其中没有内容时,div的高度是10 px。那么我想给出的样式是:

#abc {
  min-height:10px;
  height:auto !important;
  height:10px;
}

扫码关注云+社区

领取腾讯云代金券