JQuery динамическое изменение размера div после вызова ajax

Я пытаюсь расширить div, чтобы он соответствовал тексту, не указывая точное значение hegiht. Я попытался использовать что-то вроде.

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

С myclass с высотой: auto; но это не сработает. Я не знаю, как получить его для расширения div соответственно от вызова ajax, который возвращает текст.

Это основной класс 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;
  }

Я просто пытаюсь сделать высоту auto после ответа ajax. Текст может быть немного или много. Поэтому мне нужно, чтобы оно расширялось соответствующим образом. Я использую addclass, чтобы изменить его для других вещей, но использование его с jQuery addclass с pro_attach не работает.

Спасибо

Ответы

Ответ 1

Просто нужно сделать это:
Оберните лимит div вокруг div, который хотите загрузить текст с помощью ajax:

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

Скрыть #limit div переполнение:

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

И, наконец, установите высоту #limit на высоту #div, все время ПОСЛЕ загрузки текста с помощью ajax:

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

Это то же самое, просто анимированное:

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

script проверяет высоту #div и присваивает ее #limit, трюк.

Ответ 2

Предположение:. Вначале в div не было контента. Позже текст добавляется в div.

Скажем, что id div - 'abc', а высота div, когда в нем нет содержимого, составляет 10px. то стиль, который я хотел бы дать, это:

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

Источник: http://www.dustindiaz.com/min-height-fast-hack/

Ответ 3

UPD: Я создал базовый пример, я уверен, что на этом этапе я все понял неправильно, поэтому, если вы можете изменить его и опубликовать ссылку здесь, Я был бы в состоянии быть более полезным =)

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>

Ответ 4

Это решение похоже на один из ответов выше (sv_in)

У меня есть div с id abc и имеет css следующим образом:

#abc{
height:575px;
}

и я изменил его на следующее, и он сработает!

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