Высота div блока в зависимости от контента. - JavaScript, Ajax

Grasss · 29.04.2019, 00:53

Имеется div блок (height:50px; width:400px

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

Alex11223 · 29.04.2019, 10:07

Так не задавайте height.

spoon100500 · 29.04.2019, 16:55

установите min-height: 50px;

Grasss · 29.04.2019, 20:16

Я бы не стал идти на форум из-за min-height.
Прежде чем сюда обратиться я многое перепробовал.
Задача именно в скрипте.

Alex11223 · 29.04.2019, 20:27

Зачем тут скрипт если оно и так работает по умолчанию?

Grasss · 29.04.2019, 20:40

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

Alex11223 · 29.04.2019, 21:30

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

А еще лучше код выложите.
http://sscce.org/

Grasss · 01.05.2019, 01:50

Цитата:

Сообщение от 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>

29.04.2019, 10:07	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Так не задавайте height. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

29.04.2019, 16:55	#3
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	установите min-height: 50px; Еду медленно, но верно!

29.04.2019, 20:27	#5
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Зачем тут скрипт если оно и так работает по умолчанию? Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

29.04.2019, 21:30	#7
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Ну дык запишите раз лучше. А еще лучше код выложите. http://sscce.org/ Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Высота блока	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

29.04.2019, 00:53	#1
Grasss Пользователь Регистрация: 03.11.2017 Сообщений: 32	Высота div блока в зависимости от контента. Имеется div блок (height:50px; width:400px При наполнении контентом, высота div'а должна автоматически увеличиваться. Нужен скрипт, который будет выполнять эту задачу.

29.04.2019, 20:16	#4
Grasss Пользователь Регистрация: 03.11.2017 Сообщений: 32	Я бы не стал идти на форум из-за min-height. Прежде чем сюда обратиться я многое перепробовал. Задача именно в скрипте.

29.04.2019, 20:40	#6
Grasss Пользователь Регистрация: 03.11.2017 Сообщений: 32	Так-то оно так) я это пробовал и ранее, но если в блоке 2 строчки с текстом, то все норм, но если в блоках 8 строчек и более, то эти блоки с сообщениями начинают скакать по высоте, происходит небольшой скроллинг в окне чата (если зайти с мобильного устройства). А когда задаешь фиксированную высоту, тогда все отлично. В общем лучше видео записать, чтоб наглядно показать суть проблемы.