Q: Chatbox always on the bottom I'm designing a chat UI for WebView and Mobile only and I was wondering on how do you keep the edit box always on the bottom like WhatsApp or Telegram. The content in the chat box is scrollable depending on the amount of messages like mobile apps and the chat box is fixed. I tried applying fixed height but it will be messed up for different devices.
How do I make the edit box always on the bottom no matter the device height? (Just like WhatsApp or Telegram)
So far only when defining the height will allow the content to be scrollable, percentages don't work.
height:640px;

Here is the fiddle:
https://jsfiddle.net/rrL0nkq7/

A: To fix your editbox in the bottom you need to give it a position:fixed; and bottom:0; 
And if the height is known lets say height:50px;then you must add padding-bottom to chatcontainer padding-bottom:50px;because if you don't you will not see the last content of your chatbox

A: Make textarea for chat box and give it this css
textarea{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
}


A: .chatcontainer{
    height: 100px;
    position:fixed;
    bottom:0;width:200px;right:0; /*edit your wish*/
    font-size: 0.6em;
    overflow-y: scroll;
}

This will give the container a fixed height and overflow-y scroll which will make your chat scrollable. Is this what you are looking for?
