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