Angular 2中的粘性页脚材质

Question

我一直在搜索和搜索大约3个小时，因为我没有想要问，但是如何在底部保留“页脚”变量，但不像固定在底部，所以如果我拥有的内容非常小，它不会只是坐在页面的中间位置，但如果我有很多信息，它不会锁定在页面底部，并且在滚动时坐在数据的上方

我尝试了几次包括这种方式： https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html 和大多数问题与这个测试和失败，或似乎根本没有工作。

继承人我当前的代码：

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

和<app-content></app-content>是导航栏内，因为导航栏控制全页sidenav。

整个应用程序，导航栏看起来是这样的：

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

和脚注仅仅是一个超级的基本组元，看起来像这样：

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

只有造型IVE应用到目前为止是这样的：

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

这是在全局style.css文件中。

Answer 1

使用Flexbox的一种方法：

当我们利用Flexbox的，我们可以得到一个清洁解。此外，我的解决方案将涵盖您的网页的第一个组件应占100％的高度。这通常需要适当定位元素或使用背景进行工作。该代码与当前版本的Material 2相匹配 - 撰写本文时为2.0.0-beta.12。

标记：

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

样式：

/* 
* 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; 
    } 
} 

你可以找到一个Blogpost，因为我并不满意，我发现这里的解决方案，我写了一个更详细的说明。还有一个demo。

Answer 2

答案可以在这里找到： Sticky footer at the bottom in Angular 2

解决方案

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