Question

我目前正在实施一个小型聊天系统。我想要一个聊天室，在这个聊天室中，我有一个消息，以及一个用于发送新消息的按钮和输入。我面临的问题是输入重叠（位置固定），有人知道如何摆脱此问题吗？

我尝试在Internet上将底部填充，底部填充，相对于列表的位置以及许多其他解决方案放在我的位置，但是我没有找到能解决我问题的方法。

这是html：

<h4 id="chatTitle">NearyChat</h4>
<mat-divider></mat-divider>
<div id="containerChat" *ngIf="canLoad">
 <ul class="messages" id="listMessages">
  <mat-list *ngFor="let msg of messagesEvent">
    <p>{{msg.messageContent}}</p>
   <mat-divider></mat-divider>
  </mat-list>
 </ul>
<mat-form-field  id="msgSended">
<input matInput placeholder="Write a message" [(ngModel)]="messageSended"    autocomplete="off">
 <button mat-icon-button matSuffix>
  <mat-icon matSuffix (click)="sendMessage()">send</mat-icon>
 </button>
 </mat-form-field>
 </div>

这是我的CSS：

 #msgSended{
width:500px;
position:fixed;
bottom:0;
 }
#chatTitle{
display:block;
margin-bottom: 3px;
text-align: center;
}
.messages{
 margin-bottom: 50px;
 }

我无法将图像发布到stackoverflow上，但是如果有人想看一下，这是结果： https://ibb.co/WPVJYYw

我只想避免这些元素与屏幕底部的输入重叠。

如果有人能帮助我，那就太好了，谢谢。

Lio

ul元素重叠在固定位置的表单域

0 个答案: