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; 
}

或者，给你的身体一个高度。或者如另一个答案所述，摆脱你的相对高度（以百分比表示）并给它一个具有多个像素的明确高度。

https://jsfiddle.net/c66mx3nc/

Answer 2

需要在父元素上设置高度，因此height: 30%是有效的计算。

＆＃13;

* { padding: 0px; margin: 0px; }

html { height: 100%; } /* required to make body's height work */
body { height: 100%; }

.chat-history {
  height:30%;
  overflow-y:scroll;
}

.message {
  padding: 10px;
  background-color:#123;
  width: 50px;
}

＆＃13;

<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>

＆＃13;

Answer 3

必须以像素为单位应用高度。

    .chat-history {
   height:250px;
    overflow-y:scroll;
     }

演示：https://jsfiddle.net/c66mx3nc/3/

overflow-y无法更新内容

3 个答案: