Chat HTML page suggestion

I'm still learning HTML/CSS, so please expect a naive question below. With that said, I'd like to create a webpage (not the pop-up chat boxes or mobile type chat interfaces) to mock a simple chat interface.

Q1: I'd like to know which HTML element to use to insert chat instances. If I put it all in a <div id='chats'>, everytime I add new instances (new incoming chats), the page will just get longer. I'd like to limit the window to show these chat instances in a frame, so the length of the webpage stay constant. Then the user can scroll up and down within that window to read the chats. How do I accomplish that? I think StackOverflow does it for recommending questions that may have answers to my question and it uses overflow-y: scroll. Is that the way to go?

Q2: Supposed I use overflow-y: scroll, how could I keep the lastest chat instance always be the one to show after reloading? I assume that if I add a new chat <div>, it will not gain focus unless I do something special to call the focus on it?

Q3: Is there open-source chat UI for webpages that anyone would recommend?

Thank you for all your answers!

Solution

There are two things you are missing before any questions can be answered: One, you don't mention javascript anywhere, and it will be a requirement for this project. Two, if you expect multiple people to be able to use this chat, you will need some sort of server technology to relay the messages.

A1: yep "overflow-y: scroll" is the way to go

<div id="chats" style="width: 400px; height: 400px; overflow-y: scroll;">

A2: Alright, maybe I'm not understanding this question. Do you just want to scroll to the bottom (newest message) of the chat on page reload?

if so then calling something like this on page load would do:

var chatDiv = document.getElementById("chats");
chatDiv.scrollTop = chatDiv.scrollHeight;

A3: Without knowing the server-side framework technology you will be using (Node.js, PHP, ASP.NET). It's impossible to point you to a specific open source solution, but this is not a very difficult thing to do so I would assume their are a variety for each server-side framework.

Here is a simple single user implementation. As stated above, to get it working with multiple users you would have to relay it through a server or at the very least use a server to send each chatters connection info.

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>