CSS overflow value for chat

Question

I build a chat application and i have an issue with the overflow property i think.. I want when a user connects to chat to show him the last message without him have to scroll down to the last message.When a user connects to chat by default it shows the first message and user have to scroll down. my css is:

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

Any suggestions?

Answer 1

You can't do this purely with css, you'll need to use javascript.

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