用於聊天的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;
}