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

Question

I'm trying to expand a div to fit text without having to specify an exact hegiht. 我正在尝试扩展div以适应文本，而不必指定确切的hegiht。 I tried using something like. 我试过用类似的东西。

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

With myclass having a height:auto; myclass的高度为：auto; but that won't work. 但那不行。 I don't know how to get it to expand the div accordingly from an ajax call that returns text. 我不知道如何让它从一个返回文本的ajax调用中相应地扩展div。

This is the main css class 这是主要的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;
  }

I'm just trying to make the height auto after an ajax reponse. 我只是想在ajax响应之后使高度自动化。 The text can be a little or a lot. 文字可以是一点点或很多。 So I need it to expand accordingly. 所以我需要它相应扩展。 I'm used the addclass to change it for other things but using it with jQuery addclass with pro_attach doesn't work. 我使用addclass来改变其他东西但是将它与jQuery addclass与pro_attach一起使用不起作用。

Thanks 谢谢

Answer 1

Just have to do this: 只需要这样做：
Wrap a limit div around the div you want to load text with ajax: 使用ajax加载要加载文本的div周围的限制div：

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

Give the #limit div a overflow hidden: 给#limit div一个隐藏的溢出：

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

And finally, fit the #limit height to the height of the #div, at all times AFTER you load text with ajax: 最后，在使用ajax加载文本后，始终将#limit高度调整到#div的高度：

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

This is the same, just animated: 这是相同的，只是动画：

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

The script checks the height of the #div and give it to #limit, that's the trick. 该脚本检查#div的高度并将其提供给#limit，这就是诀窍。

Answer 2

Assumption: That initially, there was no content in the div. 假设：最初，div中没有内容。 Later on, the text is added into the div. 稍后，文本将添加到div中。

Let's say that the id of the div is 'abc' and the height of the div when there is no content in it is 10px. 假设div的id是'abc'，而div中没有内容的高度是10px。 then the style that I would like to give is: 然后我想给的风格是：

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

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

Answer 3

This solution is similar to one of the answers above(sv_in) 此解决方案类似于上面的答案之一（sv_in）

I have a div with id abc and has a css as follows: 我有一个id为abc的div，并且有一个css如下：

#abc{
height:575px;
}

and I changed it to the following, and it worked! 我把它改成了以下，它有效！

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

Answer 4

UPD: I created a basic example , I am pretty sure I got it all wrong at this stage, so if you could modify it and post a link here, I would be able to be more helpful =) UPD：我创建了一个基本的例子，我很确定在这个阶段我错了，所以如果你可以修改它并在这里发布一个链接，我将能够更有帮助=）

JS 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 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