Struggling to create a chat HTML template that allows for a scrollable message area? Let me break down the structure:
Chat header: Title or name at the top.
Message input box: Write messages here.
Visible chat area: Height of container minus (header height + input box height).
Messages display: Automatically adjust in height but always stay at the bottom for latest message.
This setup coexists with other HTML elements, not full screen.
https://i.sstatic.net/4FrnY.jpg
The HTML structure:
<div id="chat-1" class="chat-window">
<div class="chat-header">
<h4>Header</h4>
</div>
<div class="message-container">
<div class="general-message-container">
<div class="message-wrapper">
<!-- messages content -->
</div>
</div>
</div>
<div class="text-area">
<textarea class="form-control" placeholder="Type your message"></textarea>
<a href="#" class="send-message"></a>
</div>
</div>
CSS styling:
.chat-container {
height: 70vh;
min-height: 400px;
}
.chat-window {
position: relative;
display: inline-block;
width: 65%;
float: left;
}
.chat-window, .message-container {
height: 100%;
}
.message-container, .general-message-container {
padding: 15px 15px 20px 15px;
}
.chat-header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.message-container {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
height: 400px;
}
.general-message-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-window, .message-container {
height: 100%;
}
.message-container {
height: calc(100% - 46px);
}
.message-container, .general-message-container {
padding: 66px 20px 25px 20px;
}
.text-area {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.text-area .form-control {
resize: none;
height: 46px;
padding: 10px 20px;
}
If setting .general-message-container to position: relative; makes it scrollable but you can't align it to the bottom, try...