代码之家 › 专栏 › 技术社区 › Panama Jack

jquery动态调整Ajax调用后的DIV大小

css jquery javascript

Panama Jack · 技术社区 · 14 年前

我试图扩展一个DIV来适应文本,而不必指定一个精确的HEGIHT。我试着用类似的东西。

$('#div').addClass('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来改变它,但是用jqueryaddclass和pro_-attach来改变它是行不通的。

谢谢

4 回复 | 直到 9 年前

Iharob Al Asimi 9 年前

只需要这样做:
在要用Ajax加载文本的DIV周围换行限制DIV:

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

将limit div设为隐藏溢出:

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

最后,在使用Ajax加载文本后,始终将“限制高度”与“分区高度”匹配:

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

这是相同的,只是动画:

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

脚本检查了DIV的高度,并将其限制为极限,这就是诀窍。

sv_in 14 年前

假设: 最初,该分区中没有内容。稍后,文本将添加到该分区中。

假设DIV的ID是“abc”,当DIV中没有内容时,它的高度是10px。那么,我想给出的风格是:

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

来源: http://www.dustindiaz.com/min-height-fast-hack/

Surekha 12 年前

这个解决方案类似于上面的一个答案(sv_-in)

我有一个带身份证的分区 abc 并且有一个CSS,如下所示:

#abc{
height:575px;
}

我把它改成了下面的,它起作用了!

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

TecBrat 10 年前

UPD: 我创造了一个基本的 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>