html - 键盘弹出时向上推离子页脚

Question

我正在使用 ionic 的聊天应用程序工作，并且我有基本的页面结构。我添加了一个带有类型输入的离子页脚，但是当键盘弹出时，页脚保持在底部，就像键盘与页脚重叠一样。

如何防止这种行为？

这是我的html

<ion-header class="ion-no-border" >
    <ion-toolbar >
        <ion-buttons slot="start">
            <ion-back-button defaultHref="/notifications"></ion-back-button>
        </ion-buttons>
        <div fxLayout="row wrap" class="object-title" fxLayoutAlign="start center">
            <div  fxFlex="60px">

                <div class="icon-circle bg-gray" fxLayoutAlign="center center">
                <img [src]="'/assets/images/profile.jpg'" class="icon" alt="">
                </div>
            </div>
            <div fxFlex class="ellipsis-text">
                <span class="vtitle">SOME CONTACT NAME</span> <br>
                <span class="text-muted text-xs">10/10/2020 11:50</span>
            </div>
        </div>
        <ion-buttons slot="end">
            <ion-button>
                <ion-icon slot="icon-only" name="ellipse"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content >

    <div class="chat-content">



        <div fxLayout="row wrap" *ngFor="let i of [1,2,3]" fxLayoutAlign="start center" class="message-section">
            <div fxFlex="nogrow" class="message in" fxLayout="row wrap">
                Hi, this is just a message test
            </div>
            <div fxFlex fxLayoutAlign="start center" class="text-xs text-muted hour">
                20:08
            </div>
        </div>

        <div fxLayout="row wrap" fxLayoutAlign="end center" class="message-section">
            <div fxFlex fxLayoutAlign="end center"  class="text-xs text-muted hour">
                20:08
            </div>
            <div fxFlex="nogrow" class="message out" fxLayout="row wrap">
                Hi, this is just a message text
            </div>
        </div>

    </div>



</ion-content>
<ion-footer class="ion-no-border">
    <ion-toolbar class="no-bg no-bg-color inputtoolbar">
        <input type="text" placeholder="Type your message here" class="sendinput bg-muted">
        <ion-buttons slot="end">
            <ion-button color="primary" (click)="send()">
                <ion-icon slot="icon-only" name="send"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

当我在我的物理设备上运行它时，这是结果

但是当我尝试输入时，页脚仍在底部，如下所示：

预期的行为就像任何聊天应用程序一样，页脚类型输入附加到键盘顶部，如 whatsapp 或 messenger

如何修复页脚以附加到键盘？

标签： htmlcssangulartypescriptionic-framework