Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 29.04.2019, 00:53   #1
Grasss
Пользователь
 
Регистрация: 03.11.2017
Сообщений: 17
По умолчанию Высота div блока в зависимости от контента.

Имеется div блок (height:50px; width:400px
При наполнении контентом, высота div'а должна автоматически увеличиваться.
Нужен скрипт, который будет выполнять эту задачу.
Grasss вне форума Ответить с цитированием
Старый 29.04.2019, 10:07   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Так не задавайте height.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 29.04.2019, 16:55   #3
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

установите min-height: 50px;
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 29.04.2019, 20:16   #4
Grasss
Пользователь
 
Регистрация: 03.11.2017
Сообщений: 17
По умолчанию

Я бы не стал идти на форум из-за min-height.
Прежде чем сюда обратиться я многое перепробовал.
Задача именно в скрипте.
Grasss вне форума Ответить с цитированием
Старый 29.04.2019, 20:27   #5
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Зачем тут скрипт если оно и так работает по умолчанию?
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 29.04.2019, 20:40   #6
Grasss
Пользователь
 
Регистрация: 03.11.2017
Сообщений: 17
По умолчанию

Так-то оно так) я это пробовал и ранее, но если в блоке 2 строчки с текстом, то все норм, но если в блоках 8 строчек и более, то эти блоки с сообщениями начинают скакать по высоте, происходит небольшой скроллинг в окне чата (если зайти с мобильного устройства). А когда задаешь фиксированную высоту, тогда все отлично. В общем лучше видео записать, чтоб наглядно показать суть проблемы.
Grasss вне форума Ответить с цитированием
Старый 29.04.2019, 21:30   #7
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Ну дык запишите раз лучше.

А еще лучше код выложите.
http://sscce.org/
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 01.05.2019, 01:50   #8
Grasss
Пользователь
 
Регистрация: 03.11.2017
Сообщений: 17
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
Ну дык запишите раз лучше.

А еще лучше код выложите.
http://sscce.org/
Прикладываю видео с багом
https://www.youtube.com/watch?v=ytq17UnTXxM

Исходники чата
https://cloud.mail.ru/public/4j3U/3k3moM4K8

index.php
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
@import url('https://fonts.googleapis.com/css?family=Titillium+Web'); 
</style>
<style>
body {
    font: 15px ;
    color: #0ED095;
    text-align: center;
    padding: 35px;
    background-color:#03192A;
    font-family: 'Titillium Web', sans-serif;
}

form,p,span {
    margin: 0;
    padding: 0;
}

input {
    font: 17px arial;
}

a {
    color: #0BCBD7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#wrapper,#loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #1e2b35;
    width: 100%;
    border: 1px solid #142e3d;
}



#chatbox {
    font:12px calibry;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #494949;
    height: 270px;
    width: 95%;
    border: 1px solid #0AC875;
    overflow: auto;
}

#usermsg {
    width: 80%;
    border: 1px solid #ACD8F0;
}

#submit {
    width: 60px;
}



.msgln {
    margin: 0 0 2px 0;   font:12px calibry;
}
</style>

</head>
<body>

<div id="wrapper">
        
        <div id="chatbox"><?php
        if (file_exists ( "chatlog.php" ) && filesize ( "chatlog.php" ) > 0) {
            $handle = fopen ( "chatlog.php", "r" );
            $contents = fread ( $handle, filesize ( "chatlog.php" ) );
            fclose ( $handle );
            
            echo $contents;
        }
        ?></div>

        <form name="message" action="">
            <input name="usermsg" type="text" id="usermsg" size="63" /> <input
                name="submitmsg" type="submit" id="submitmsg" value="Send" />
        </form>
    </div>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
// jQuery Document


//If user submits the form
$("#submitmsg").click(function(){
        var clientmsg = $("#usermsg").val();
        $.post("post.php", {text: clientmsg});               
        $("#usermsg").attr("value", "");
        loadLog;
    return false;
});

function loadLog(){       
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
    $.ajax({
        url: "chatlog.php",
        cache: false,
        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
            }               
          },
    });
}

setInterval (loadLog, 2500);
</script>

    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
</script>
</body>

</html>
post.php
Код:
<?php
    $text = $_POST['text'];
    
    $fp = fopen("chatlog.php", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(iconv('UTF-8', 'Windows-1251', $text))."<br></div>\n");
    fclose($fp);

?>
chatlog.php
Код:
<div class='msgln'>(12:04 AM) <b></b>: Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu<br></div>
<div class='msgln'>(12:04 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div> 
<div class='msgln'>(12:05 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div>
<div class='msgln'>(12:04 AM) <b></b>: Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu<br></div> 
<div class='msgln'>(12:05 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div>
<div class='msgln'>(12:11 AM) <b></b>: xxxczz<br></div>

Последний раз редактировалось Alex11223; 01.05.2019 в 09:47.
Grasss вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Высота блока bamvam HTML и CSS 0 29.01.2014 12:07
Автоматическая высота блока в аккордеоне neo-archer HTML и CSS 0 10.01.2014 01:32
Вывод блока контента с подробной инфой Pingvinenok_Lolo PHP 17 29.03.2012 18:27
автоматич. высота блока, имеющая минимум johny_03 HTML и CSS 4 22.11.2011 17:37
CSS ,высота контента bondik HTML и CSS 1 25.01.2010 19:35