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

您只需添加var para = document.createElement("tr"); var node = document.createTextNode(data.filename); para.appendChild(node); var el = document.getElementsByClassName("toBeSelected"); el.appendChild(para); 和css <main flex>即可。看到这个plunker：http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

在页面底部放置一个mat-toolbar，并使用下面的CSS spacer将文本居中放置。：

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

要得到这个：