I need assistance creating a chat widget that has a maximum height for the entire chat and allows the content to fill in without specifying fixed heights within the chat itself. Below is my code:
HTML
<section class="boxlr-chat">
<div class="boxlr-chat-header">
{{ Title }}
<span>{{ Subtitle }}</span>
</div>
<ul class="boxlr-chat-messages">
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
<li>{{ Message }}</li>
</ul>
<form action="#" class="boxlr-chat-form">
<input type="text" />
<button type="submit">Send</button>
</form>
</section>
CSS
.boxlr-chat {
width: 100%;
max-height: 200px;
background-color: #1abc9c;
}
.boxlr-chat-header {
background-color: #2ecc71;
}
.boxlr-chat-messages {
margin: 0;
padding: 0;
list-style-type: none;
height: 150px;
overflow: scroll;
background-color: #3498db;
}
.boxlr-chat-form {
width: 100%;
background-color: #34495e;
}
I am looking for a solution where the message <ul> fills the box except for the header and form, even with a small number of messages. I want the chat to scroll while keeping the title and form visible at the top and bottom. I managed to achieve this by specifying a height of 150px on boxlr-chat-messages, which is not ideal. Additionally, when scrolling, the scroll bar only reaches 80% of the box height.
What is the best way to fix:
- The scroll bar
- The chat layout
Apologies for the vague title. For more clarity, you can refer to the JSFiddle here.