Faire corps du message de chat scrollable

Question

j'ai le suivant le chat 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> 

Quand jamais une conversation vient, je joins cela chat_box div

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

Mais l'ensemble div va quand le chat augmente comme image ci-dessous

Comment puis-je faire le chat boîte de taille constante et les messages à faire défiler dans la fenêtre?

Answer 1

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

Answer 2

Veuillez indiquer une hauteur et un dépassement fixes: auto à chat_box div. Et donnez une hauteur à la classe chat_two/conver.

par exemple.

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

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

Answer 3

Ajouter ceci à votre chat_box

#chat_box 
{ 
    overflow-y :auto; 
}