チャットボックスは常に最下部にあります

Question

私はWebViewとモバイル専用のチャットUIを設計していますが、Wh​​atsAppやTelegramのようにいつも編集ボックスを最下部に置いておきたいのですか？チャットボックス内のコンテンツは、モバイルアプリのようなメッセージの量に応じてスクロール可能であり、チャットボックスは修正されています。私は固定された高さを適用しようとしましたが、それは別のデバイスのために台無しになるでしょう。

デバイスの高さにかかわらず、エディットボックスを常に下部に作成するにはどうすればよいですか？ （WhatsAppや電報のように）

これまでは、高さを定義するとコンテンツをスクロール可能にする場合に限り、パーセンテージは機能しません。ここで

height:640px; 

はフィドルです：

https://jsfiddle.net/rrL0nkq7/

Answer 1

は、あなたがそれを与える必要が底にあなたのエディットボックスを修正するにはposition:fixed;と

そしてbottom:0;知られている高さはheight:50px;は、あなたがchatcontainerにパディング下を追加する必要があります言うことができます場合padding-bottom:50px;あなたであれば理由あなたのチャットルームの最後のコンテンツは表示されません

Answer 2

これは、コンテナに固定の高さを与えるチャットボックス用のテキストエリアを作成し、それを

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; 
} 

をこのCSSを与え、 overflow-y scrollあなたのチャットをスクロール可能にします。これはあなたが探しているものですか？