javascript - 如何固定文本框在屏幕上的位置

Question

我在我的网络应用程序中实现了一个聊天系统，我正在显示消息列表(新消息将在下面附加)和一个消息框，用户可以在其中输入他们的消息。

我目前面临的问题是，当我将新消息添加到列表(附加到最后一行的底部)时，消息框被推到屏幕下方。

如何固定消息框在屏幕上的位置，使其不会被压下？

需要说明的是，消息框将始终位于列表中最后一条消息的下方。这意味着我需要页面自动滚动，以便消息框始终保持在原位，即在屏幕中央

Answer 1

因为你没有分享任何标记，我做了一个我的演示......所以为了停止你的输入框被按下，你需要使用 overflow-y: scroll;在你的消息框上，像这样给它一个固定的高度:My Fiddle

HTML

<div class="container">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
<input type="text" />​

CSS

.container {
height: 200px; 
width: 200px; 
background-color: #ff0000; 
overflow-y: scroll;
}​