Как настроить Angular Material Footer с помощью Flex-Layout

Question

Как настроить нижний колонтитул в моем приложении (я использую Angular Material), чтобы он:

1. прилипал к низу, если высота содержимого меньше, чем view-port
2. перемещается вниз / толкается вниз, если высота содержимого больше, чем порт просмотра

Еще одна важная вещь - я хотел бы добиться этого с помощью angular / flex-layout , а не через стандартный HTML / CSS 'flex-box'.

<mat-sidenav-container>
  <mat-sidenav #sidenav
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">

    <mat-nav-list>
      <mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
        <mat-icon mat-list-icon>{{li.icon}}</mat-icon>
        <p mat-line>{{li.name}}</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer></app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>   

Спасибо всем.

Answer 1

Вот решение в несколько строк, если вы предпочитаете заполнять свой контент вместо нижнего колонтитула (решение Ахи):

app.component.html:

<div fxLayout="column" fxFlexFill>
    <app-header></app-header> // your header
    <div fxFlex>
        <router-outlet></router-outlet> // your content
    </div>
    <app-footer></app-footer> // your footer
</div>

styles.css:

html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

Answer 2

Сделайте контейнер flex и направление column, добавив fxLayout="column" и сделайте нижний колонтитул липким на fxFlexOffset="auto"

  <mat-sidenav-content fxLayout="column">

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer fxFlexOffset="auto"></app-footer>

  </mat-sidenav-content>