css - 聊天的 CSS 溢出值

Question

我构建了一个聊天应用程序，但我认为溢出属性存在问题。我希望当用户连接到聊天时向他显示最后一条消息，而无需他向下滚动到最后一条消息。当用户通过以下方式连接聊天时默认它显示第一条消息，用户必须向下滚动。我的CSS是：

.chat{
  height: 175px;
  width: 488px;
  margin: 0 auto;
  background-color: #000;
  padding: 20px 40px;
  border: solid 1px black;
  overflow: auto;
} 

有什么建议么？

Answer 1

你不能纯粹用css来做这件事，你需要使用javascript。

var chatDiv = document.getElementsByClassName('chat')[0]; //I assume you only have one chat box!
chatDiv.scrollTop = chatDiv.scrollHeight;

Answer 2

默认overflow情况下发生在右侧或底部。为此，您必须使用其他一些技术。

一种是：使用包装器并将您的聊天消息绝对放置在底部：

<div id="wrapper">
    <div id="chat"></div>
</div>

使用CSS：

#wrapper{
    position: relative;
    height: 175px;
    width: 488px;
    overflow: hidden;
}

#chat{
    position: absolute;
    bottom: 0;
}