使聊天消息正文可滚动

Question

我有以下聊天HTMl

<div class="chat" id="chat_window" style="display:none">
<div class="title"> HEADER </div>
<div id="chat_box">

     <div class="conver chat_two">
        <p> HEY HOW ARE YOU</p>
     </div>

</div>
</div>

当聊天来的时候，我将其附加到chat_box div

<div class="conver chat_two">
     <p> IAM FINE</p>
</div>

但是当聊天增加时，整个div正在上升，如图所示

如何使聊天框的大小恒定，并在窗口内滚动消息？

Answer 1

#chat_window {
  overflow-y: scroll;
  height: 300px;
}

Answer 2

请给出一个固定的高度并溢出：auto to chat_box div。 并给出chat_two / conver class的高度。

e.g。

#chat_box{
  height : 100px;
  overflow:auto;
}
.chat_two{
   height : 50px; 
 }

https://jsfiddle.net/gztqza7j/1/

Answer 3

将此添加到您的chat_box

#chat_box
{
    overflow-y :auto;
}