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