離子如何將離子含量與頁面底部對齊

Question

我正在嘗試將消息輸入框與頁面底部對齊，但似乎無法正常工作。 我嘗試使用 align-self-end 並為離子腳制作 css class 。

<ion-content>
<ion-footer align-self-end>
  <ion-toolbar color="light">
    <ion-row align-self-end>
      <ion-col size="10">
        <ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
          (click)="sendMessage()">
          <ion-icon name="paper-plane"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer> 
</ion-content>

ion-footer{
    display: flex;
    align-items: flex-end;
    margin: auto; 
    padding-top: .5em;
    padding-bottom: .5em;
  }

Answer 1

<ion-footer>並不意味着<ion-content>內的 go

html文件的結構應該是

<ion-header>
</ion-header>

<ion-content>
</ion-content>

<ion-footer>
</ion-footer>

在您的情況下，您想在內容底部顯示另一個元素，您可以像這樣插入 textarea ..不要將 ion-row 放在 ion-toolbar 內。

<ion-content>
</ion-content>


<ion-footer>
    <ion-toolbar>
        <ion-textarea maxRows="4" [(ngModel)]="message" placeholder="Write a message"></ion-textarea>
        <ion-icon name="paper-plane" slot="end"></ion-icon>
    </ion-toolbar>
</ion-footer>