如何修复屏幕上的文本框位置

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

Answer 2

不能完全理解确切的问题。

如果您希望将消息框固定在窗口中的某个位置而不管其他控件的位置，您可以执行以下操作：

#msgboxContainer
{
  position:absolute;
  left:10px; 
  bottom:20;
}