如何在angularjs材質設計中創建固定頁腳

Question

這是我的頁面佈局。

<div layout="column" layout-fill ng-controller="MainCtrl as mc"> 
     <header> 

     <md-toolbar md-scroll-shrink> 
      <div layout="row" layout-align="center center" flex> 
      HEADER INFO 
      </div> 
     </md-toolbar> 

     </header> 

     <main> 
     <div ui-view> 
     </div> 
     </main> 

     <footer> 
     <md-toolbar class="md-scroll-shrink"> 
      <div layout="row" layout-align="center center" flex> 
      FOOTER INFO 
      </div> 
     </md-toolbar> 
     </footer> 

    </div> 

當前頁腳正在主要內容之後顯示。取決於顯示在屏幕中間某個位置的主腳本的大小或者低於頁面高度。

我想讓頁腳始終固定在屏幕底部。並根據main的大小，主要內容應該有一個滾動。

任何人都可以幫助我嗎？

Answer 1

您只需要添加<main flex>和css overflow-y: auto;。看到這個plunker：http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

地氈工具欄在頁面的底部，使用下面的CSS間隔，以文本居中這樣.:

<mat-toolbar color='primary'> 
    <span class='spacer'></span> 
    <h3>© Copyright Angular Apps 2017.</h3> 
    <span class='spacer'></span> 
</mat-toolbar> 

使用這個CSS：

.spacer { 
    -webkit-box-flex: 1; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 

爲得到這個：