fupuchu fupuchu - 15 days ago 5
HTML Question

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/

Answer

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