如何在angularjs材料设计中创建固定页脚

Posted 2023-02-22

【中文标题】如何在angularjs材料设计中创建固定页脚

【英文标题】：How to create a fixed footer in angularjs material design

【发布时间】：2016-06-19 06:35:28

【问题描述】：

这是我的页面布局。

<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 的大小，在 main 内容中应该有一个滚动。

谁能帮我解决这个问题？

【参考方案1】：

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

【参考方案2】：

在页面底部放置一个 mat-toolbar 并使用以下 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;

要得到这个：