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