html - Overflow-y 不适用于更新内容

Question

现在我正在我的网站上工作。由于我更改了每 1.5 秒更新消息的代码，因此滚动条被禁用，并且高度不再起作用。

有一个小预览:

.chat-history {
    height:30%;
    overflow-y:scroll;
}

.message {
  padding: 10px;
  background-color:#123;
  width: 50px;
}

<div class="chat-history">
  <p class="message">TEST</p>  
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
  <p class="message">TEST</p>
</div>

JSFIDDLE Example

Answer 1

聊天 div 需要位于具有高度属性的容器中，30% 的高度才有效。

将你的代码包装成这样:

<div class='container'>
    <div class='chat-history>
        ...
    </div>
</div> 

并添加CSS(示例):

.container {
   height: 600px; 
}

或者，给你的 body 一个高度。或者如另一个答案中所述，去掉相对高度(以％表示)并给它一个带有多个像素的明确高度。

https://jsfiddle.net/c66mx3nc/