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

Question

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

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

如何修复消息框在屏幕上的位置，使其不会被向下推？

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

Answer 1

由于您没有共享任何标记，因此我制作了一个演示......所以为了阻止您的输入框被按下，您需要overflow-y: scroll;在您的消息框上使用并给它一个固定的高度，如下所示：我的小提琴

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