Javascript ajax调用后jQuery动态调整div大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3984607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dynamic resize div after ajax call
提问by Panama Hyman
I'm trying to expand a div to fit text without having to specify an exact hegiht. I tried using something like.
我正在尝试扩展 div 以适应文本，而无需指定确切的高度。我尝试使用类似的东西。
$('#div').addClass('myclass');
With myclass having a height: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.
myclass 有一个 height:auto; 但这行不通。我不知道如何让它从返回文本的 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. 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.
我只是想在 ajax 响应后自动设置高度。文本可以是一点也可以很多。所以我需要它相应地扩展。我使用 addclass 将其更改为其他用途，但是将它与带有 pro_attach 的 jQuery addclass 一起使用不起作用。
Thanks
谢谢
回答by Thomas
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，这就是诀窍。
回答by sv_in
Assumption:That initially, there was no content in the div. Later on, the text is added into the div.
假设：最初，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. then the style that I would like to give is:
假设 div 的 id 是 'abc'，没有内容时 div 的高度是 10px。那么我想给出的风格是：
#abc {
min-height:10px;
height:auto !important;
height:10px;
}
回答by Maksim Vi.
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>
回答by Surekha
This solution is similar to one of the answers above(sv_in)
此解决方案类似于上述答案之一（sv_in）
I have a div with id abcand has a css as follows:
我有一个带有 id 的 divabc并且有一个 css，如下所示：
#abc{
height:575px;
}
and I changed it to the following, and it worked!
我将其更改为以下内容，并且有效！
#abc {
min-height: 575px;
height: auto;
}
