Question

我有一个父div块的固定宽度和高度，其内部是一个child-div块（具有相同的宽度/高度），我正在填充用户＆＃39;消息。随着消息量的增加，我希望能够向下滚动此块以查看所有用户＆＃39;消息不会破坏正在发生的div块的边界。是否有任何适当的技术可以将所有消息保留在div边界内？

请看一下问题的截图。

＆＃13;

#chat_messages {
    width: 700px;
    float: left;
    height: 570px;
    overflow-x: hidden;
    overflow-y: auto;
}

#inner_messages {
    width: 700px;
    height: 570px;
    font-size: 14px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    font-weight: normal;
    background: #fedc3d;
    color: #000000;
    border: 5px solid #01abaa;
    word-wrap: break-word;
    white-space: initial;
}

＆＃13;

<!doctype html>

<html>
  
<head>
<title>Test Page</title>  
</head>  
  
<body>
  <div id="chat_messages">
     <div id="inner_messages">
     </div>
   </div>  
</body>
  
</html>

＆＃13;

Answer 1

您的代码正常运行。我稍微重新安排了css。

Codepen Link

HTML：

 <div id="chat_messages">
     <div id="inner_messages">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia numquam, consequuntur nesciunt non, voluptatem nostrum, ducimus rerum hic ipsum, cumque eius. Saepe et dolore odio illum a! Ad, amet, asperiores?loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad repudiandae officiis soluta maiores, mollitia libero optio error quidem distinctio sed molestias doloremque asperiores assumenda beatae temporibus cum sit vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe repudiandae perspiciatis quidem non. Eos, in repellendus voluptas rem, voluptatibus numquam ipsa molestias quam id autem quas hic vero expedita tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni doloribus, commodi libero deserunt nobis error necessitatibus officiis quaerat dicta ex obcaecati, quo laboriosam non nesciunt quod illum nihil eveniet dignissimos?
     </div>
   </div>

CSS：

#chat_messages {
    width: 700px;
    float: left;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
      font-size: 14px;
    font-family: "Lucida Grande", "Lucida    Sans Unicode", "Lucida Sans", Geneva,
     font-weight: normal;
    border: 5px solid #01abaa;
      background: #fedc3d;
}

#inner_messages {
    color: #000000;
    word-wrap: break-word;
    white-space: initial;
}

parent-div overflow-y打破了child-div的边框

1 个答案: