Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Высота div блока в зависимости от контента. 
:(
    Опции темы
GRASSS
Дата 29.4.2019, 01:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 13
Регистрация: 2.11.2017

Репутация: нет
Всего: нет



Имеется div блок (height:50px; width:400px;) 
При наполнении контентом, высота div'а должна автоматически увеличиваться. 
Нужен скрипт, который будет выполнять эту задачу.
PM MAIL   Вверх
Oldshelf
Дата 29.4.2019, 19:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 155
Регистрация: 22.4.2018

Репутация: нет
Всего: 4



Попробуйте свойство "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>

PM MAIL WWW   Вверх
GRASSS
Дата 29.4.2019, 20:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 13
Регистрация: 2.11.2017

Репутация: нет
Всего: нет



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

Это сообщение отредактировал(а) GRASSS - 29.4.2019, 20:42
PM MAIL   Вверх
Oldshelf
Дата 30.4.2019, 12:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 155
Регистрация: 22.4.2018

Репутация: нет
Всего: 4



Тогда можно создать скрытый "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>

PM MAIL WWW   Вверх
GRASSS
Дата 1.5.2019, 01:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 13
Регистрация: 2.11.2017

Репутация: нет
Всего: нет



PM MAIL   Вверх
Oldshelf
Дата 1.5.2019, 12:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 155
Регистрация: 22.4.2018

Репутация: нет
Всего: 4



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

Код

<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'а.

Эффект по исходникам проверить не могу -  мобильного устройства нет.
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1204 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.