Come creare un footer fisso in angularjs design materiale

Question

Questo è il mio layout di pagina.

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

Attualmente il piè di pagina viene visualizzato subito dopo il contenuto principale. a seconda delle dimensioni del main o del piè di pagina che visualizza da qualche parte il centro dello schermo o scende sotto l'altezza della pagina.

Voglio che il piè di pagina venga fissato sempre in basso sullo schermo. e a seconda delle dimensioni del main, dovrebbe esserci una scroll nel contenuto principale.

qualcuno può aiutarmi in questo?

Answer 1

È sufficiente aggiungere <main flex> e css overflow-y: auto;. Vedere questo plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

Posizionare un tappetino-barra degli strumenti in fondo alla pagina e utilizzare il seguente distanziale CSS per centrare il testo come questo .:

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

Usando questo CSS:

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

Per ottenere questo: