ajax调用后jQuery动态调整大小div

Question

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

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

myclass的高度为：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来改变其他东西但是将它与jQuery addclass与pro_attach一起使用不起作用。

谢谢

Answer 1

只需要这样做：
使用ajax加载要加载文本的div周围的限制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，这就是诀窍。

Answer 2

假设：最初，div中没有内容。 稍后，文本将添加到div中。

假设div的id是'abc'，而div中没有内容的高度是10px。 然后我想给的风格是：

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

资料来源： http ： //www.dustindiaz.com/min-height-fast-hack/

Answer 3

此解决方案类似于上面的答案之一（sv_in）

我有一个id为abc的div，并且有一个css如下：

#abc{
height:575px;
}

我把它改成了以下，它有效！

#abc {
min-height: 575px;
height: auto;
}

Answer 4

UPD：我创建了一个基本的例子，我很确定在这个阶段我错了，所以如果你可以修改它并在这里发布一个链接，我将能够更有帮助=）

JS

var testData = "Test data, Test data, Test data, Test data, Test data, Test data, Test data, Test data, Test data";


$("#btn").click(function(){
  $("#sub").html(testData);
  $("#sub").css({height: 'auto'});
});**strong text**

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  #main{
    border: 1px solid #f00;
    padding: 5px;
    width: 100px;
  }
  #sub{
    border: 1px solid #000;
    padding: 5px;
    height: 72px;
  }
</style>
</head>
<body>
  <div id="main">
    <div id="sub">
    </div>
  </div>
  <input type="button" id="btn" value="ajax event"/>
</body>
</html>

ajax调用后jQuery动态调整大小div

问题描述

4 个解决方案

解决方案1
20 已采纳 2010-10-21 06:44:10

解决方案2
12 2010-10-21 06:09:13

解决方案3
1 2013-01-02 19:53:38

解决方案4
1 2010-10-21 05:49:31

ajax调用后jQuery动态调整大小div

问题描述

4 个解决方案

解决方案1 20 已采纳 2010-10-21 06:44:10

解决方案2 12 2010-10-21 06:09:13

解决方案3 1 2013-01-02 19:53:38

解决方案4 1 2010-10-21 05:49:31

解决方案1
20 已采纳 2010-10-21 06:44:10

解决方案2
12 2010-10-21 06:09:13

解决方案3
1 2013-01-02 19:53:38

解决方案4
1 2010-10-21 05:49:31