Как я могу сделать так, чтобы он показывал дно этого элемента? (HTML, CSS, JS)

Question

Я хочу, чтобы пользователи могли видеть отправленное после них сообщение, которое они не могут видеть, потому что ему не хватает места, и я не хочу, чтобы элемент постоянно расширялся, поэтому он не разрушал / уничтожал элементы.

Как я могу показать, что отправляется после АА? https://i.imgur.com/g13UDBg.png

с использованием Socket.io, jquery, js, html и css.

<!-- code -->
<div style="float:right;margin-right:3%; height:550px;">
  <ul id="messages" style="height: 85%;"></ul>
      <form action="" style="">
        <input id="m" autocomplete="off" /> <button class="btn-primary">Send</button>
      </form>
  </center>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

Answer 1

Одним из решений является добавление полосы прокрутки в окно чата,

<!-- code -->
<div style="float:right;margin-right:3%; height:550px; ">
  <ul id="messages" style="height: 85%;overflow-y: scroll;"></ul>
      <form action="" style="">
        <input id="m" autocomplete="off" /> <button class="btn-primary">Send</button>
      </form>
  </center>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

Это даст вам что-то похожее на это:

Answer 2

Чтобы все данные отображались вертикально, необходимо добавить

CSS

overflow-y : scroll;

к вашему ul.

После этого для плавного движения для прокрутки вниз после вставленных данных добавьте анимацию как

Jquery

$(document).ready(function(){
  $("input").keyup(function(){
 $('ul').animate({scrollTop: '100%'}, 800);
  });
});