刚好我之前处理过类似的聊天场景需求，你要实现的核心是固定消息容器高度避免撑破布局，同时新消息发送/接收时自动滚动到容器底部，给你一步步拆解解决方案：

第一步：先把消息容器的滚动属性配置好 #

首先得确保消息列表(#messages)在内容过多时只会出现滚动条，而不会扩展容器高度。修改你HTML里的ul样式：

<ul id="messages" style="height: 85%; overflow-y: auto; list-style: none; padding: 0; margin: 0;"></ul>

这里新增的overflow-y: auto是关键——当内容高度超过容器时自动显示垂直滚动条，同时牢牢锁住容器高度。加上list-style: none; padding: 0; margin: 0是为了消除默认列表样式，让布局更整洁。

第二步：实现自动滚动到底部的逻辑 #

每次有新消息添加到列表后，我们需要让容器自动跳转到最底部。可以写一个复用的小函数，然后在发送和接收消息的逻辑里调用它：

修改你的JavaScript代码，添加滚动函数并关联到消息事件：

$(function () {
  var socket = io();
  
  // 定义滚动到底部的复用函数
  function scrollToBottom() {
    const messagesContainer = $('#messages');
    messagesContainer.scrollTop(messagesContainer[0].scrollHeight);
  }

  $('form').submit(function(e){
    e.preventDefault(); 
    const message = $('#m').val();
    if(message.trim()){ // 避免发送空消息
      socket.emit('chat message', message);
      $('#m').val('');
      // 自己发送消息后立刻滚动到底部
      scrollToBottom();
    }
    return false;
  });

  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
    // 收到新消息后自动滚动到底部
    scrollToBottom();
  });

  // 页面加载完成后默认滚到底部（如果有历史消息）
  scrollToBottom();
});

关键代码说明： #

• scrollTop(messagesContainer[0].scrollHeight)：scrollHeight是元素内容的总高度（包括不可见的部分），把scrollTop设置为这个值，就能让容器直接跳转到最底部。
• 发送消息后调用：确保自己发的消息也能立刻显示在视野里，不用手动滚动。
• 页面初始化调用：如果页面加载时已有历史消息，也会自动定位到最新的一条。

第三步：优化整体布局（可选但推荐） #

为了让聊天区的布局更稳定，建议把外层div改成flex布局，固定消息区和输入区的位置，避免输入框被挤变形：

<div style="float:right; margin-right:3%; height:550px; display: flex; flex-direction: column;">
  <ul id="messages" style="flex: 1; overflow-y: auto; list-style: none; padding: 10px; margin: 0; border: 1px solid #eee; border-radius: 4px;"></ul>
  <form action="" style="margin-top: 10px; display: flex; gap: 8px;">
    <input id="m" autocomplete="off" style="flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
    <button class="btn-primary" style="padding: 8px 16px;">Send</button>
  </form>
</div>

用flex布局后，消息区会自动占满剩余空间，输入区固定在底部，整体布局会更健壮。

这样修改后，你的聊天框就会保持固定高度，新消息出现时自动滚动到底部，完全不会破坏其他页面元素啦！

内容的提问来源于stack exchange，提问作者Avex