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

【问题标题】：jQuery dynamic resize div after ajax callajax调用后jQuery动态调整div大小
【发布时间】：2010-10-21 05:42:54
【问题描述】：

我正在尝试扩展 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 一起使用是行不通的。

谢谢

【问题讨论】：

尝试从你的 CSS 中移除高度。或者您可以在 Firebug 中查看在 ajax 响应后生成的调整大小元素的 css 并查看样式是否实际应用正确（height:auto 应该覆盖 height:72px）。或者，只需将 height:72px 更改为 min-height:72px 并忘记添加任何其他类，ajax 内容将扩展元素的高度，但空元素将具有 72px 的高度。
感谢您的信息。我尝试了两种方式。我刚刚意识到我要调整大小的 div 是父级，而不是内容所在的 div。这会受到什么影响？这应该重要吗？不应该以同样的方式工作吗？
如果我对你的理解正确，那么你有以下内容：<div id="main"><div id="ajaxHolder"></div><div> 你想调整 main，而不是 ajaxHolder？在这种情况下，您可以给 ajaxHolder 72px 的高度，并在 ajax 到达时将其更改为自动使用$("#ajaxHolder").css({height: 'auto'});。没有高度的父级应根据其内容展开。

标签： javascript jquery css

【解决方案1】：

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

【讨论】：

谢谢...这符合我的需要。我实际上对其进行了一些修改，并采用了以前的高度并像这样添加它 $("#limit").css({ height:$("#div").height() + 72 });这样它就会添加以前的高度，因为它已经包含了内容。
非常漂亮优雅的解决方案！ +1

【解决方案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/

【讨论】：

高度：自动！重要；有效！
height:auto !important: 为我工作！谢谢！

【解决方案3】：

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

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

#abc{
height:575px;
}

我把它改成了下面的，它工作了！

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

【讨论】：

【解决方案4】：

统一更新： 我创建了一个基本的example，我很确定我在这个阶段完全错了，所以如果你可以修改它并在这里发布一个链接，我会更有帮助=）

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>

【讨论】：

我没有分配 div 的 id。这只是一个例子。我会尝试一个宽度，看看会发生什么。
好吧，您不必抱歉 =) 提供更多信息，一些 css 和 javascript（您处理 ajax 响应的地方）会有所帮助。另请注意，如果 ajax 响应包含任何 html 标签，它可能会破坏您的标记。
你好，实际上需要调整大小的div不是内容所在的主div，而是一个外层div。那应该有关系吗？如果是这样，我们如何根据内部 div 的 ajaxed 内容影响它？
看，我不能确定，因为问题中没有足够的细节，但是如果你的父 div 有一个固定的高度，你的子 div 不会扩大，即使它高度是自动的。
感谢您的帮助 Thomasz 回答了我的问题。