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