如何使用无序列表为可滚动文本创建边框

Question

目前，我的应用程序使用Socket.IO和node.js作为服务器。每当有人发送消息时，它会将自己附加到无序列表中，然后在页面上正确显示。问题是用户输入消息的区域位于底部，当最后发布许多消息时，最新的<li>标记开始显示在用户输入消息的文本框下。稍后会出现一些消息，会出现一个滚动条，让您可以阅读之前未被允许阅读的消息，然后再次在文本框下方显示最新消息。我的临时（真的很糟糕）解决方案是检查消息列表的长度，并在达到某个数字后删除列表中的最后一条消息。