一些错误在HTML编程聊天室

Question

https://jsfiddle.net/LiNNN/96edrLno/ < <这是我的小提琴

我有一些错误，但我不知道什么是错误
我想设计一个聊天室的布局像这样>>enter image description here
有人聊天在这里，如果用户在聊天框输入大量的文字和排版会在我的聊天区
原则聊天区将按照聊天区块扩大
但它没有，我不知道为什么 - >这是Q1

当用户向聊天提交相当长的消息时，消息就会进入聊天区外，并且它似乎不会在每条消息之间断开连线。 ？

如何达到这个我不知道我的CSS出了错

function runScript(e) { 
 
       if (e.keyCode == 13) { 
 
        var chatDiv = document.getElementById("Chat"); 
 
        var input = document.getElementById("inputText"); 
 
        chatDiv.innerHTML = chatDiv.innerHTML + "<span class=\"myWord\">" + input.value + "</span><br /><br /><br/>"; 
 
        input.value = ""; 
 
       } 
 

 
      }

#Chat { 
 
     border-radius: 45px; 
 
     margin:20px; 
 
     padding:20px; 
 
     border:solid; 
 
     border-width:1px; 
 
     background-color:#bbb9b9; 
 
     font-weight: bold; 
 
    } 
 

 
    div.othersText { 
 
     max-width:80%; 
 
     padding:20px; 
 
     margin-top:25px; 
 
     margin-bottom:25px; 
 
     } 
 
    div.myText { 
 
     max-width:80%; 
 
     padding:20px; 
 

 
     text-align:right; 
 
     margin-top:25px; 
 
     margin-bottom:25px; 
 
     } 
 

 
    span.myWord{ 
 
     border-radius: 45px; 
 
     border:solid; 
 
     border-width:1px; 
 
     background-color:#E9EBEE; 
 
     padding:15px; 
 
     color:#ab0af1; 
 
     max-width:80%; 
 
     float:right; 
 
     clear:both; 
 
    } 
 

 
    span.othersWord{ 
 
     float:left; 
 
     clear:both; 
 
     border-radius: 45px; 
 
     border:solid; 
 
     border-width:1px; 
 
     background-color:#E9EBEE; 
 
     padding:15px; 
 
     max-width:80%; 
 
     color:#3B5998; 
 
    } 
 
    #textInput{ 
 
     text-align: center; 
 
    } 
 

 
    #textInput input{ 
 
     width: 90%; 
 
     height: 40px; 
 
     text-align: center; 
 
     font-size: 16px; 
 
    }

<div id="Chat"> 
 
       <div class="othersText"><span class="othersWord">Johnny:The air quality in this city is horrendous! The pollution levels were so high that we all need to wear a face mask when we go outside. </span></div> 
 
       <div class="myText"><span class="myWord">Exhaust fumes from vehicles cause a great deal of damage to the environment.</span></div> 
 
       <div class="othersText"><span class="othersWord">Johnny:On top of that, there are a few large chemical factories in the suburbs, which are contributing to the high pollution levels in the water and the air in this city.</span></div> 
 
       <div class="myText"><span class="myWord">As much as I love this city, I think I'm going to have to find a greener city to live in. Living in a polluted city like this just can't be good for my health. </span></div> 
 
       <div class="othersText"><span class="othersWord"> Johnny:I know what you mean. However, there are so few places left that have not been affected by global warming. If it's not the pollution, then it's the natural disasters, deforestation, or the greenhouse effect. </span></div> 
 
       <div class="myText"><span class="myWord"> What is the greenhouse effect exactly? </span></div> 
 
       <div class="othersText"><span class="othersWord">Johnny:It's the gradual rise in the earth's temperature. </span></div> 
 
      </div>

Answer 1

我不知道如果这是你在找什么，但尝试添加溢出：隐;到你的#Chat元素。

Answer 2

您可以将height: 400px; overflow-y: scroll添加到#Chat元素样式中。