Pied de page collant en Angulaire 2 Matériel

Question

J'ai cherché et cherché environ 3 heures maintenant parce que je ne voulais pas avoir à demander, mais comment puis-je garder une variable "bas de page" en bas, mais pas comme fixe en bas, donc si le contenu que j'ai est très petit, il ne sera pas assis à mi-chemin dans la page mais si j'ai beaucoup d'informations, il ne se verrouille pas au bas de la page et reste assis sur les données pendant que vous faites défiler

façons dont celui-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 à ce ive testé et échoué avec ou ne semblent pas fonctionner du tout.

Heres mon code actuel:

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

et <app-content></app-content> est dans la barre de navigation, car la barre de navigation contrôle un sidenav FullPage.

-navbar application ressemble à tout le 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 componenet super basique qui ressemble à ceci:

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

seulement ive style appliqué à ce jour est la suivante:

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

Qui est dans le fichier global style.css.

Answer 1

Une approche qui utilise Flexbox:

Lorsque nous utilisons Flexbox nous pouvons obtenir un plus propre Solution. Aussi ma solution couvrira que le premier composant de votre page devrait prendre 100% de la taille. 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, c'est 2.0.0-beta.12.

Markup:

<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> 

Styles:

/* 
* 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 trouverez une description plus détaillée dans un Blogpost que j'ai écrit depuis que je suis satisfait de la solution que je trouve ici. Il y a aussi un demo.

Answer 2

La réponse se trouve ici: Sticky footer at the bottom in 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; 
}