如何在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; 
} 

为得到这个：