Chatbox总是在底部

Question

我正在为WebView和Mobile设计一个聊天界面，我想知道如何将编辑框始终保持在底部，比如WhatsApp或Telegram。聊天框中的内容是可滚动的，取决于移动应用程序等消息的数量，并且聊天框是固定的。我试着应用固定高度，但对于不同的设备，它会被搞砸。

无论设备高度如何，如何使编辑框始终位于底部？(就像WhatsApp或电报一样)

到目前为止，只有当定义高度允许内容可滚动时，百分比才不起作用。

height:640px;

这是小提琴：

https://jsfiddle.net/rrL0nkq7/

Answer 1

要修复底部的编辑框，需要给它一个position:fixed;和bottom:0;

如果已知高度，比如height:50px;，那么您必须向聊天容器padding-bottom:50px;添加填充底部，因为如果不这样做，就不会看到chatbox的最后内容。

Answer 2

创建聊天框的textarea，并给它这个css

textarea{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
}

Answer 3

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

这将给容器一个固定的高度和overflow-y scroll，这将使您的聊天滚动。这就是你要找的吗？