CODEWITHSUNDEEP
htmlcssangularjsmaterial-designangular-material
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

How to create a fixed footer in angularjs material design

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?

Upvotes: 12

Views: 28115

Answers (2)

pmkent
pmkent

Reputation: 1016

Place a mat-toolbar at the bottom of the page and use the following CSS spacer to center the text like this.:

<mat-toolbar color='primary'>
  <span class='spacer'></span>
    <h3>© Copyright Angular Apps 2017.</h3>
  <span class='spacer'></span>
</mat-toolbar>

Using this CSS:

.spacer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

To get this:

Angular Material Footer (Text centered).

Upvotes: -1

Captain
Captain

Reputation: 677

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

Upvotes: 12

Related Questions