div.style.height="100%"? или изменение высоты до размера содержимого.

[halgerd]

div.style.height="100%"? или изменение высоты до размера содержимого.

Естественно, такая конструкция не работает .
Суть в том, что в div помещается заранее неизвестное кол-во строк данных. Нужно увеличить высоту дива, чтобы размер был равен кол-ву строк.
Заранее спасибо!

 

[dark-demon]

height='auto'

 

[allexey]

При работе с DIV, об этом заботиться не надо, при добавлении новых строк он автоматически увеличивает свой размер:

<DIV style="position:absolute; background-color:red">
<P>Строка 1</P>
<P>Строка 2</P>
<P>Строка 3</P>
<P>Строка 4</P>
</DIV>

выше приведенный код это подтверждает, ограничивая границы DIV красным цветом.

Если же Вам нужно получить именно значение высоты тогда можно сложить высоту всех строк, учитывая размер шрифта.

Для конкретизации вопроса укажите где вы применяете эти данные.

 

[RoLex]

Re: div.style.height="100%"? или изменение высоты до размера содержимого.

Автор оригинала: halgerd
Естественно, такая конструкция не работает .
Суть в том, что в div помещается заранее неизвестное кол-во строк данных. Нужно увеличить высоту дива, чтобы размер был равен кол-ву строк.
Заранее спасибо!

советую избегать применения абсолютного позицианирования.

вот тебе пример верстки. граница дива по краю 1й и последней строки. (Mozilla FF, IE, Opera)

<DIV style="border: 1px solid red;">
<P style="margin:0px; padding:0px;">Строка 1</P>
<P>Строка 2</P>
<P>Строка 3</P>
<P  style="margin:0px; padding:0px;">Строка 4</P>
</DIV>

PS. а лучше уточни, что ты имеешь ввиду под " изменение высоты "до размера содержимого

 

[halgerd]

<div id="container" style="overflow: hidden; height:100px;">
qqqq1</br>
qqqq2</br>
qqqq3</br>
qqqq4</br>
qqqq5</br>
</div>
<button onclick="run()">развернуть</button>

Сначала отображается, допустим, 3 строки. После нажатия див должен развернуться по всей высоте, чтоб отобразить все строки. Для красоты использую модуль анимации YUI.
<script type="text/javascript">
var attributes = {
height: { to: '200' }<!--!!!-->
};
var anim = new YAHOO.util.Anim('category-container', attributes);

function run()
{
anim.animate();
}

</script>

Вместо этого точно так же можно использовать style.heigh, но он требует конкретных числовых значений.

Есть ли ещё вариант, кроме как подсчёт высоты строк?

dark-demon, auto в этой конструкция не проходит.

 

[A1x]

имхо плохой способ прятать строки по overflow: hidden
допустим юзер захотел увеличить шрифт - а размер дива 100 пх - и что?

я бы честно показывал в диве 3 строки а по кнопке Развернуть подгружал бы остальное аяксом. Естественно высоту дива при этом можно не задавать (auto)

 

[allexey]

Советую использовать свойства innerHTML и innerText.

Только применять их нужно не к DIV, а к таблице помещенной в DIV, вообщем:

<DIV>
<TABLE id="sometable">
</TABLE>
</DIV>
<SCRIPT>
document.all.sometable.innerHTML="<TR><TD>Вот и все<TD><TR>";
</SCRIPT>

 

[fixxxer]

ужас какой. не надо тут таких советов

 

[halgerd]

InnerHTML, или добавления через DOM не позволят создать эффект анимации(высота плавно увеличивается, показывая содержимое).

Время поджимает. Решил задачу путём оборачивания кажд. строки в див и высчитыванием высоты, в зависимсоти от кол-ва строк.
Всем спасибо!

 

[dark-demon]

что мешает сначала выставить auto, получить целевой размер и потом уже делать какую угодно анимацию?

 

[halgerd]

в таком случае запрос document.getElementById("category-container").style.height выдаёт пустую строку.

 

[dark-demon]

currentStyle + getComputedStyle

 

[halgerd]

Спасибо. Действительно работает! Обязательно возьму эти методы на вооружение.