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

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>

目前页脚显示在主要内容之后。取决于主要的页脚显示在屏幕中间某处或低于页面高度的大小。

我希望页脚始终固定在屏幕底部。并且根据主要内容的大小，主要内容中应该有一个滚动。

谁能帮我解决这个问题？

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

得到这个：

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

How to create a fixed footer in angularjs material design

html

css

angularjs

material-design

angular-material