如何解決文本框在屏幕上的位置

Question

我在我的web應用中實現了一個聊天系統，並且顯示了消息列表（新消息將在下面添加）以及用戶可以在其中輸入消息的消息框。

我當前所面臨的問題是，消息框被按下屏幕爲我添加新郵件列表（追加到最後一行的底部）。

如何修復屏幕上消息框的位置，使其不會被推下？

爲了澄清，消息框將始終低於列表中的最後一條消息。這意味着我需要頁面自動滾動，以便消息框始終保持在位置，即在屏幕中心

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