为 Angular 聊天创建可滚动 Div

Question

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

Answer 1

您链接的页面不会加载，但以下是制作可滚动元素的基础知识：HTML / JS 结构制作一个外容器div制作一个内部容器div（这将是“滚动包装”）将内部容器附加到外部容器将您需要的任何东西插入内部容器（您可以使用类似的东西insertAdjacentHtml或适合您的具体情况的任何东西）这种步骤顺序尤其适用于内容动态变化的场景。CSS对于外容器设置一个固定值width并设置height: autoborder-radius如果您想要圆形边缘，请设置 a设置overflow: hidden为防止滚动包装纸的角弹出你可能会想要一些padding内容器用您将希望max-height和min-height小于外部容器的“固定” width+“任何padding”，等等。它可能有。放position: relative设置overflow-y: auto和overflow-x: hidden以便可以上下滚动，但不能左右滚动为了获得所需的溢出行为，您需要设置和width: 100%的固定值。（决定什么时候东西开始溢出，即制作一个滚动条） max-heightmin-heightmax-height