Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Высота div блока в зависимости от контента.

Автор: GRASSS 29.4.2019, 01:18

Имеется div блок (height:50px; width:400px;)
При наполнении контентом, высота div'а должна автоматически увеличиваться.
Нужен скрипт, который будет выполнять эту задачу.

Автор: Oldshelf 29.4.2019, 19:43

Попробуйте свойство "min-height", вместо "height":

Код


<div style="min-height:50px; width:400px;background:gray">
abc<br />abc<br />abc<br />abc<br />
</div>

<br /><br />

<div style="min-height:50px; width:400px;background:gray">
abc<br />
</div>

Автор: GRASSS 29.4.2019, 20:17

Так-то оно так) я это пробовал и ранее, но если в блоке 2 строчки с текстом, то все норм, но если в блоках 8 строчек и более, то эти блоки с сообщениями начинают скакать по высоте, происходит небольшой скроллинг в окне чата (если зайти с мобильного устройства). А когда задаешь фиксированную высоту, тогда все отлично. В общем лучше видео записать, чтоб наглядно показать суть проблемы.

Автор: Oldshelf 30.4.2019, 12:00

Тогда можно создать скрытый "div" с идентичными данными, но без height'а, измерить его высоту и применить к видимому div'у:

Код


<div id="div1" style="position:absolute;left:-1000px;width:400px;background:gray">
abc<br />abc<br />abc<br />abc<br />
</div>

<div id="div2" style="height:50px; width:400px;background:gray">
abc<br />abc<br />abc<br />abc<br />
</div>

<script>
document.getElementById("div2").style.height=document.getElementById("div1").offsetHeight+"px";
</script>

Автор: GRASSS 1.5.2019, 01:52

https://www.youtube.com/watch?v=ytq17UnTXxM

https://cloud.mail.ru/public/4j3U/3k3moM4K8

Автор: Oldshelf 1.5.2019, 12:23

Немного улучшенная версия:

Код


<div id="div3" style="position:absolute;left:-1000px;width:400px;background:gray">
</div>

<div id="div4" style="height:50px; width:400px;background:gray">
abc<br />abc<br />abc<br />abc<br />
</div>

<script>
document.getElementById("div3").innerHTML=document.getElementById("div4").innerHTML;
document.getElementById("div4").style.height=document.getElementById("div3").offsetHeight+"px";
</script>

Переносит содержимое div'а в скрытый div, измеряет его и устанавливает высоту оригинального div'а.

Эффект по исходникам проверить не могу - мобильного устройства нет.