我怎样才能让它显示这个元素的底部？ (HTML, CSS, JS)

Question

I want users to be able to see message that are sent after, which they cant see cause it runs out of room and i dont want the element to constantly expand so it wont ruin/destroy over elements.

How can i make this show the what is being sent after AA? https://i.imgur.com/g13UDBg.png

using Socket.io, jquery, js, html and 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

For all the data to be visible vertically you must add

CSS

overflow-y : scroll;

to your ul .

After that for the smooth motion for the scroll down after the data inserted add the animation as

Jquery

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

Answer 2

One solution is to add a scrollbar to your chat box,

<!-- 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>

This will give you something that looks like this: