I am making a chat web app and I want to set messages above the red line in the given image https://i.stack.imgur.com/M34xb.png.
my HTML is
<div id="messages">
<ul style="list-style-type:none;"> <!-- update msg here --> </ul>
</div>
<div class="user-field">
<input id="write-msg" type="text" placeholder="Type your message here....">
<button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
and related CSS is
.user-field{
position: fixed;
width: 50%;
bottom: 10px;
width: 100%;
height: 7%;
padding: 5px;
background-color: rgb(207, 209, 208);
margin: auto;
display: inline-block;
}
#messages{
background-color: rgb(207, 209, 208);
overflow: scroll;
height: 93%;
}
I tried hard to find but not getting something to fix it.