<分区>
我还在学习 HTML/CSS，所以请期待下面的幼稚问题。话虽如此，我想创建一个网页(不是弹出式聊天框或移动式聊天界面)来模拟一个简单的聊天界面。
Q1:我想知道使用哪个 HTML 元素来插入聊天实例。如果我把它全部放在 <div id='chats'> 中，每次我添加新实例(新的传入聊天)时，页面都会变长。我想限制窗口以在框架中显示这些聊天实例，因此网页的长度保持不变。然后用户可以在该窗口中上下滚动以阅读聊天记录。我如何做到这一点？我认为 StackOverflow 这样做是为了推荐可能对我的问题有答案的问题，它使用 overflow-y: scroll .这是要走的路吗？
Q2:假设我使用 overflow-y: scroll ，我怎么能保持最新的聊天实例总是在重新加载后显示？我假设如果我添加一个新聊天 <div> ，它不会获得焦点，除非我做一些特别的事情来调用它的焦点？
问题 3:是否有任何人会推荐的用于网页的开源聊天 UI？
谢谢大家的回答!
最佳答案
在回答任何问题之前，您缺少两件事:第一，您没有在任何地方提到 javascript，而这将是该元素的要求。第二，如果您希望多人能够使用此聊天，您将需要某种服务器技术来中继消息。
A1:是的“溢出-y:滚动”是要走的路
<div id="chats" style="width: 400px; height: 400px; overflow-y: scroll;">
A2:好吧，也许我没有理解这个问题。您只想在页面重新加载时滚动到聊天的底部(最新消息)吗？
如果是这样，那么在页面加载时调用这样的东西就可以了:
var chatDiv = document.getElementById("chats");
chatDiv.scrollTop = chatDiv.scrollHeight;
A3:在不了解您将使用的服务器端框架技术(Node.js、PHP、ASP.NET)的情况下。不可能向您指出特定的开源解决方案，但这并不是一件很难做到的事情，所以我假设它们对于每个服务器端框架都是多种多样的。
这是一个简单的单用户实现。如上所述，要让它与多个用户一起工作，您必须通过服务器中继它，或者至少使用服务器来发送每个聊天者连接信息。
https://jsfiddle.net/3yvzp93m/4/
function writeMessage(form){
var now = new Date().toLocaleString()
var user = form.username.value;
var message = form.msg.value;
document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + now + " | " + user + " said: " + message + "<br />";
}<div id="chat" style="width: 100%; height: 150px; overflow-y: scroll;">
</div>
<form name="message" method="POST">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="msg">Message</label>
<input type="text" name="msg" />
<input type="button" name="button" value="Submit" onClick="writeMessage(this.form)" />
</form>关于css - 聊天 HTML 页面建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31748404/