Контент, полученный в div, сдвигает страницу вниз вместо отображения полосы прокрутки.

Question

Привет, ребята, после работы над скриптом я столкнулся с проблемой, когда я получаю данные с другой php страницы через ajax. Show_msg - это блок div, который находится в центре страницы, где должны отображаться сообщения из базы данных, полученные через AJAX. Итак, данные выбираются другой страницей php, а затем отображаются в div show_msg. Div должен отображать полосу прокрутки, так как есть много сообщений, но, к сожалению, когда данные отображаются в div show_msg, он выталкивает все содержимое страницы вниз, как это вот мой div, где данные для отображения ..

    <div id="show_msg">

    </div>

Вот мой css:

#show_msg {
    width: 100%;
    border: 1px solid #D8D4D4;
    border-right: none;
    border-left: none;
    min-height: calc(96% -  4%);
    height: calc(96% - 4%);
    max-height: calc(96% - 4%);
}

Вот мой JS:

$('#send_btn').click(function(){
    var msgContent = $('#message_input').val();
    if(msgContent == '')
    {
        alert('message to likh bhai');
    }
    else
    {
        $.ajax({
            url: 'lib/function.php',
            method: 'POST',
            data:{func: 'send_msg', msgContent:msgContent},
            success: function(data)
            {
                if(data == 'sent')
                {
                    $('#message_input').val('');
                }
            }
        })
    }
});

Вот мой php страница, откуда берутся данные:

<?php
    include 'connect.php';
    global $con;
    $get_data = mysqli_query($con, "SELECT * FROM messages");
    while($row = mysqli_fetch_array($get_data))
    {
    ?>
            <div id="chat_box">
                <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
                    <div class="content-2">
                        <p style="font-weight: bold;font-size:13px;">BaTuTa</p>
                        <p class="comment"><span><?php echo $row['message_body'] ?> </span></p>                     
                        </div>
            </div>
            <?php
    }
                        ?>

Answer 1

height: calc(96% - 4%); определяет высоту в процентах от содержащего блока. Если высота содержащего блока не зафиксирована, она будет высотой всего документа.

Вы должны исправить высоту в px и добавить overflow, чтобы предотвратить выталкивание всего содержимого страницы вниз.

#show_msg {
    width: 100%;
    border: 1px solid #D8D4D4;
    border-right: none;
    border-left: none;   
    height: 300px;
    overflow: auto;
}