Question

我正在为WebView和Mobile设计一个聊天用户界面，我想知道如何将编辑框始终放在底部，如WhatsApp或Telegram。聊天框中的内容可以滚动，具体取决于移动应用等消息的数量，并且聊天框是固定的。我尝试使用固定高度，但它会混淆不同的设备。

无论设备高度如何，如何使编辑框始终位于底部？（就像WhatsApp或Telegram一样）

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

height:640px;

这是小提琴：

https://jsfiddle.net/rrL0nkq7/

Answer 1

要修复底部的编辑框，您需要为其提供position:fixed;和bottom:0;

如果高度已知，请说height:50px;，那么您必须在 chatcontainer padding-bottom:50px;中添加padding-bottom，因为如果不知道，则不会看到最后的内容您的聊天室

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，这将使您的聊天可滚动。这是你在找什么？

聊天箱总是在底部

3 个答案: