制作聊天消息正文滚动

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类的高度。

例如

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

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

Answer 3

添加到您的chat_box

#chat_box 
{ 
    overflow-y :auto; 
}