创建用于角度聊天的可滚动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
   • 设置overflow: hidden，以防止滚动包装的边角弹出
   • 您可能需要一些padding

2. 用于内部容器

   • 设置position: relative
   • 设置overflow-y: auto和overflow-x: hidden，以便您可以上下滚动，但不能左右滚动
   • 对于所需的溢出行为，您需要设置width: 100%并为max-height和min-height设置固定值。 （max-height决定何时开始溢出，即制作滚动条）
     • 您将希望max-height和min-height小于外部容器的固定width +任何其可能具有的padding等。