I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various approaches but haven't quite achieved the clean layout I desire.
.chat-head {
background: red;
position: fixed;
top: 0;
width:100%;
}
.chat-body {
position: relative;
overflow-y: scroll;
height: 93vh;
margin: 25px 0;
background:green;
}
.chat-foot {
background: blue;
position: fixed;
bottom: 0;
width:100%;
}<div class="col chat-head">
One of three columns
</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col chat-body">chat<br>chat<br>chat<br>chat<br>...
View my JSFiddle for a live example: https://jsfiddle.net/aLysfspo/1/