时间戳

首页 > 解决方案 > 角度可滚动的 div

html - 角度可滚动的 div

问题描述

我想创建一个 Angular 应用程序，它在与聊天框非常相似的设计中显示 JSON 数据结构。我为“聊天框”创建了一个组件

示例结构（也是我的 chatbox.component.ts 中唯一的内容）：

  test = [
    { "date":"1","sender":"x","answer":"hello"},
    { "date": "2", "sender": "y", "answer": "hello my friend" },
    { "date": "3", "sender": "z", "answer": "bye" }
  ];

Chatbox.component.html ：

<div class="inboxContainer">
        <tr *ngFor="let msg of test">
            <div class="wrapper">
                <div class="sender">Sender: {{msg.sender}}</div>
                <div class="date">Date : {{msg.date}}</div>
            </div>
            <div class="answer">Message: {{msg.answer}}<br></div>
        </tr>
</div>
<div class="newMessageContainer">
    <mat-form-field>
        <mat-label>New Message</mat-label>
        <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="3"></textarea>
    </mat-form-field>

</div>
<div class ="sendMessageContainer">
<button mat-button>
    Send
</button>
</div>

Chatbox.component.css ：

.inboxContainer {
    width: 40vw;
    height: 60vh;
    border: 1px solid black;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
.newMessageContainer {
     margin: auto;
     position: absolute;
     top: 80vh;
     left: 30vw;
     bottom: 0;
     right: 0;
}
.mat-form-field {
  width: 30vw;
  top:0.1vh;
}
.mat-button {
    left: 4vw;
    top:1.4vh;
    background-color: #B29B59;
}
.sendMessageContainer {
        margin: auto;
        position: absolute;
        top: 80vh;
        left: 60vw;
        bottom: 0;
        right: 0;
}
.wrapper {
  display:flex;
}
.date {
  border:1px solid black;
  width: 20vw;
  border-right:none;
  border-left:none;
}
.sender {
border:1px solid black;
width: 20vw;
border-left:none;
}
.answer {
width: 38.8vw;
height: 18vh;
}

按钮本身可以忽略，它实际上只是显示结构的方式。正确的消息显示如下： 聊天 它还没有设计好，现在也不是很重要。我能够显示 3 条消息，但如果我尝试显示 4,5 或 6 条消息，它会通过边框溢出（边框是固定的，大小应该保持不变）。
我的问题是：如何向 div 添加滚动条？

这里还有一个示例，它显示了当我尝试显示 4 条消息时它的外观： 在此处输入图像描述

标签： htmlcssangular

解决方案

首先，注意到tr标签的错误使用。

<tr *ngFor="let msg of test">
  <div class="wrapper">
      <div class="sender">Sender: {{msg.sender}}</div>
      <div class="date">Date : {{msg.date}}</div>
  </div>
  <div class="answer">Message: {{msg.answer}}<br></div>
</tr>

不知道为什么tr用于这个位置。tr只能在table标签内使用。您需要将其替换为div. 另外，您需要添加如下overflow: auto;。.inboxContainer

.inboxContainer {
    width: 40vw;
    height: 60vh;
    border: 1px solid black;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

推荐阅读