避免文本在列中向上移动

Question

我正在制作一个网站，您可以在两个不同的列中发送消息（对于两个假定的用户）。有一个脚步声系统每秒都会增加<br>一次，因此消息一出现就会立即上升。所以基本上，每次您发送一条消息时，它都会在您发送的列中上升，直到它在页面顶部消失。我的问题如下：每次用户输入一条消息时，它都会使该列的所有其他消息发生变化（我认为这是正常的），但其他人的列不受此更改的影响，因此如果它是一个重要的信息。我想知道这是否可以弥补这一点；因为我已经尝试了很多事情，但我什么也没想到，而且由于我仍在学习，所以我看不到太远哈哈......https://i.stack.imgur.com/tBouv.gif body {    font-family: sans-serif;    font-size: 1.3rem;    margin: 0;    background-color: #5a6c58;}.messInd {     margin: 0;    padding: 0;}#messL, #messR{    width: 24vw;    position: fixed;    bottom: 0;    background-color: pink;}.wrapper {    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-gap: 0px;    grid-auto-rows: minmax(100vh, auto);    height: 100vh;}.pathL,.pathR{    -ms-overflow-style: none;  /* Internet Explorer 10+ */    scrollbar-width: none;  /* Firefox */    overflow: scroll;    position: relative;    height: 100%;    background-color: #ffdbf5;}.pathL {    background: rgb(255,219,245);    overflow: hidden;    text-align: center;    padding: 0.5rem;    grid-column: 1 / 2;}.pathR {    background: rgb(255,255,245);    grid-column: 2 / 2;} .pathL::-webkit-scrollbar, .pathR::-webkit-scrollbar{     display: none;  /* Safari and Chrome */}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class ="wrapper">        <div class="pathL" id="droite">             <br><br><br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br><br>                    <div id="messL">                  <input id="mL" autocomplete="off" name="name"/>              </div>         </div> 

Answer 1

所以我现在的答案是：

            console.log($('#' + identifier).height());

            var compensate = $('#' + identifier).height();

            $(".pathL").append( // the oposite column

                $("<div class ='compensate'></div>").css('height', compensate)

                );

它添加了发送到另一列的消息高度的 div。