Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Высота div блока в зависимости от контента.

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

VIPMAGNUM

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

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 01:09 29-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM
и?  
min-height: 50px; вместо height:50px;  
решает эту проблему.

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 01:12 29-04-2019
VIPMAGNUM

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Немного не то)) мне нужно чтобы по умолчанию была фиксированная высота блока)

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 01:33 29-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM

Цитата:
Немного не то)) мне нужно чтобы по умолчанию была фиксированная высота блока)

а вы попробовали? как раз то - если контента меньше по высоте, то высота останется на 50px
 
https://jsfiddle.net/am7v8f25/

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 01:38 29-04-2019 | Исправлено: Mavrikii, 01:40 29-04-2019
VIPMAGNUM

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

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 20:18 29-04-2019 | Исправлено: VIPMAGNUM, 20:45 29-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM

Цитата:
но если в блоках 8 строчек и более, то эти блоки с сообщениями начинают скакать по высоте,

тогда они уже не удовлетворяют вашему условию

Цитата:
При наполнении контентом, высота div'а должна автоматически увеличиваться.  

либо, если изначально все равно сколько контента, а важно чтобы растягивалось при изменении - менять это css свойство в нужный момент (при обновлении контента)

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 20:48 29-04-2019
VIPMAGNUM

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Я вообще думал что есть скрипт, который при добавлении новых строк в div, пропорционально добавит и высоту.

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 20:56 29-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM

Цитата:
который при добавлении новых строк в div, пропорционально добавит и высоту.

зачем, если это реализуется через css?
либо что то не договариваете, тогда показывайте примеры.

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 20:59 29-04-2019
VIPMAGNUM

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Прикладываю видео с багом  
https://www.youtube.com/watch?v=ytq17UnTXxM
 
Исходники чата
https://cloud.mail.ru/public/4j3U/3k3moM4K8

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 01:54 01-05-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM

Цитата:
Прикладываю видео с багом

Так вам не высоту дива нужно менять, а чтобы содержимое прокрутилось вниз до сообщения?

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 03:03 01-05-2019
VIPMAGNUM

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Совершенно верно.
Но когда мы принудительно зададим высоту div, то  этот баг пропадает, а когда не указываем высоту - происходит такой скачок.

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 09:13 01-05-2019 | Исправлено: VIPMAGNUM, 12:18 01-05-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VIPMAGNUM

Цитата:
Совершенно верно.  

начнем с того, что у вас реализация не совсем правильная. вы можете получать обновления сразу после $.post("post.php", {text: clientmsg});  и отображать в чате - тогда не будет лишнего запроса к серверу. но, ок, как сделали.

Код:
        success: function(html){        
            $("#chatbox").html(html); //Insert chat log into the #chatbox div    
             
            //Auto-scroll            
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }                
          },

не нужны тут условия, скроллирования больше доступного пространства все равно не будет.
или вас беспокоит, что будет в случае меньшего количества строк? тогда проще обернуть содержимое в div и сравнивать его высоту с высотой окна вывода чата.
 
ну и, опять же, я бы не гонял весь чат целиком, а только новое (используя метки времени)
 
можно просто вида

Код:
var chat = $('#chatbox');
chat.animate({scrollTop: chat.attr('scrollHeight')});

Всего записей: 15101 | Зарегистр. 20-09-2014 | Отправлено: 23:17 01-05-2019 | Исправлено: Mavrikii, 23:21 01-05-2019
VIPMAGNUM

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
<<вы можете получать обновления сразу после $.post("post.php", {text: clientmsg});  и отображать в чате - тогда не будет лишнего запроса к серверу>>
 
Напишите этот вариант, попробую его.

Всего записей: 12 | Зарегистр. 26-10-2017 | Отправлено: 12:11 02-05-2019
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Высота div блока в зависимости от контента.


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru