How to create a fixed footer in angularjs material design

Question

This is my page layout.

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

Currently footer is displaying just after main contents. depending upon the size of main either footer displaying somewhere middle of screen or goes below page height.

I want footer to be fixed always bottom of screen. and depending on the size of main, there should be a scroll in main content.

can anyone help me on this?

Answer 1

You just need to add <main flex> and css overflow-y: auto;. See this plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview