web-dev-qa-db-fra.com

Pied de page collant dans Angular 2 matériel

Je cherche depuis environ 3 heures parce que je ne voulais pas avoir à demander, mais comment puis-je conserver une variable 'pied de page' en bas mais pas comme fixée en bas, donc si le contenu que j'ai est très petit, il ne reste pas à mi-chemin dans la page, mais si j'ai beaucoup d'informations, il ne se verrouille pas au bas de la page et reste là pendant le défilement des données.

J'ai essayé plusieurs méthodes, dont celle-ci: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html et la plupart des questions liées à cela que j’ai testées et qui ont échoué ou ne semblent pas fonctionner du tout.

Heres mon code actuel:

<div class="content">
  <app-navbar></app-navbar>
  <app-footer></app-footer>
</div>

et le <app-content></app-content> est dans la barre de navigation car elle commande une page entière sidenav.

La barre de navigation complète de l'application ressemble à ceci:

<mat-sidenav-container fullscreen>

  <mat-sidenav mode="Push" #sidenav>
    <div fxLayout="column">
      <mat-toolbar fxLayoutAlign="center center" color="primary">
        <button mat-icon-button routerLink="/home" (click)="sidenav.close()">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-toolbar>
      <button mat-button routerLink="/dashboard" (click)="sidenav.close()" >Information</button>
      <button mat-button routerLink="/second" (click)="sidenav.close()" >Web tools</button>
    </div>
  </mat-sidenav>
  <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-xs>
      <mat-icon>menu</mat-icon>
    </button>

    <div fxLayout="row">
      <button fxLayout="flex-shrink: 0;" mat-button class="title" style="font-size: 25px;">{{this.title}}</button>
      <button fxShow="false" fxShow.gt-xs mat-button routerLink="/dashboard" [matMenuTriggerFor]="infoMenu">Information</button>
      <button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">Web tools</button>
    </div>
    <!-- fxFlex will fill the empty space and Push the following items to the right -->
    <div fxFlex></div>
    <button mat-icon-button>
      <mat-icon>face</mat-icon>
    </button>
  </mat-toolbar>
  <app-container></app-container>

</mat-sidenav-container>

Et le pied de page est juste un élément super basique qui ressemble à ceci:

<mat-toolbar>
  <div class="container">
    <span>this is a toolbar</span>
  </div>
</mat-toolbar>

Le seul style appliqué jusqu'ici est le suivant:

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
.title {
  font-family: "Comfortaa";
}
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}

Ce qui est dans le fichier global style.css.

angularflexboxmaterial-designangular-material2
3
Cacoon

Une approche utilisant Flexbox:

Lorsque nous utilisons Flexbox, nous pouvons obtenir une solution cleaner. De plus, ma solution couvrira le fait que le premier composant de votre page doit prendre 100% de la hauteur. Cela est souvent nécessaire pour positionner les éléments de manière appropriée ou pour travailler avec des arrière-plans. Le code correspond à la version actuelle de Material 2 - au moment de l'écriture, il s'agit de 2.0.0-beta.12.

Balisage:

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav>
    <mat-list>
      <mat-list-item [routerLink]="['/']"> Foo</mat-list-item>
      <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item>
    </mat-list>
  </mat-sidenav>

  <div class="page-wrap">
    <header role="banner">
      <mat-toolbar color="primary">
        <button
          type="button"
          mat-icon-button
          (click)="sidenav.open()"
          title="Open sidenav">
          <mat-icon>menu</mat-icon>
        </button>
        Your Toolbar
      </mat-toolbar>
    </header>
    <main class="content">
      <router-outlet></router-outlet>
    </main>
    <footer>
      Your sticky footer with a variable height.
    </footer>
  </div>
</mat-sidenav-container>

Modes:

/*
 * Actual Sticky Footer Styles
 */
.all-wrap {
  min-height: 100vh;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}


/*
 * Make the Component injected by Router Outlet full height:
 */
main {
  display: flex;
  flex-direction: column;
  > *:not(router-outlet) {
    flex: 1;
    display: block;
  }
}

Vous pouvez trouver une description plus détaillée dans Blogpost que j’ai écrit depuis que je n’étais pas satisfait de la solution trouvée ici. Il y a aussi un demo .

13
Can K.

La réponse se trouve ici: Pied de page collant en bas dans Angular 2

Solution

app {
  min-height: 100%;
  width: 100%;
  margin-bottom: -271px;
  display: table;
}

header-main,
router-outlet,
footer{
  display: table-row;
}

header-main {
 height: 60px;
}

router-outlet {
  position: absolute;
}

footer {
  height: 271px;
}
0
Cacoon