为 Angular 聊天创建可滚动 Div

Question

我正在 Angular 中创建一个聊天应用程序，并尝试为其设置 UI。我需要创建一个 div 来容纳聊天消息，随着更多消息填充 div，我不希望 div 展开，而只是保持相同的大小并显示滚动条。该 div 的大小应为父 div 的 100%。当您单击按钮添加数据时，div 会增大。即使我以 px 或百分比格式设置高度，div 仍然会增长。

Answer 1

您链接的页面不会加载，但以下是制作可滚动元素的基础知识：

HTML / JS 结构

1. 制作一个外容器div

2. 制作一个内部容器div（这将是“滚动包装”）

3. 将内部容器附加到外部容器

4. 将您需要的任何东西插入内部容器（您可以使用类似的东西insertAdjacentHtml或适合您的具体情况的任何东西）

这种步骤顺序尤其适用于内容动态变化的场景。

CSS

1. 对于外容器

• 设置一个固定值width并设置height: auto

• border-radius如果您想要圆形边缘，请设置 a

• 设置overflow: hidden为防止滚动包装纸的角弹出

• 你可能会想要一些padding

2. 内容器用

• 您将希望max-height和min-height小于外部容器的“固定” width+“任何padding”，等等。它可能有。

• 放position: relative

• 设置overflow-y: auto和overflow-x: hidden以便可以上下滚动，但不能左右滚动

• 为了获得所需的溢出行为，您需要设置和width: 100%的固定值。（决定什么时候东西开始溢出，即制作一个滚动条） max-heightmin-heightmax-height