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始終在底部

回答

相關問題