gpt4 book ai didi

html - parent-div overflow-y 打破了 child-div 的边界

转载 作者:行者123 更新时间:2023-11-28 04:49:16 24 4
gpt4 key购买 nike

我有一个固定宽度和高度的 parent-div block ,其中是一个 child-div block (具有相同的宽度/高度),我正在填充用户的消息。随着消息量的增加,我希望能够向下滚动此 block 以查看所有用户的消息,而不会破坏 div block 的边界,这目前正在发生。是否有任何适当的技术可以尝试将所有消息保留在 div 边框内?

请看一下问题的截图。

enter image description here

#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;
}
<!doctype html>

<html>

<head>
<title>Test Page</title>
</head>

<body>
<div id="chat_messages">
<div id="inner_messages">
</div>
</div>
</body>

</html>

最佳答案

您的代码正在运行。我重新安排了一些 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;
}

关于html - parent-div overflow-y 打破了 child-div 的边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40796086/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com