Chatbox始终在底部

我正在为WebView和Mobile设计一个聊天UI，我想知道如何让编辑框始终位于底部，如WhatsApp或Telegram。聊天框中的内容可根据移动应用等消息的数量进行滚动并且聊天框已修复。我尝试应用固定高度，但它会被搞乱了不同的设备。Chatbox始终在底部

无论设备高度如何，编辑框总是在底部？（就像WhatsApp或电报）

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

height:640px;

这里是小提琴：

https://jsfiddle.net/rrL0nkq7/

来源

2016-11-24 fupuchu

[FIDDLE]（https://jsfiddle.net/rrL0nkq7/4/） – Abhi

要解决您的编辑框在底部，你需要给它一个position:fixed;和bottom:0;

如果是已知的高度可以说height:50px;则必须添加填充，底部chatcontainerpadding-bottom:50px;因为如果你你不会看到你的聊天室的最后内容

来源

2016-11-24 07:12:59 Chiller

非常感谢！这正是它：D – fupuchu

我很高兴它帮助：D – Chiller

制作textarea的聊天框，并给它这个CSS

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

来源

2016-11-24 07:04:57 Lasha

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

这将给集装箱固定的高度和overflow-y scroll这将使您的聊天滚动。这是你想要的？

来源

2016-11-24 07:05:29

嗨，你有没有试过 –

Chatbox始终在底部

回答

相关问题