So erstellen Sie eine feste Fußzeile in angularjs Materialdesign

Question

Dies ist mein Seitenlayout.

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

Derzeit Fußzeile angezeigt werden nur nach dem Hauptinhalt. abhängig von der Größe der Hauptfußzeile, die irgendwo in der Mitte des Bildschirms angezeigt wird oder unter die Seitenhöhe fällt.

Ich möchte Fußzeile immer unten am Bildschirm befestigt werden. und abhängig von der Größe von main sollte es einen Scroll im Hauptinhalt geben.

kann mir jemand dabei helfen?

Answer 1

Sie müssen nur hinzufügen <main flex> und css overflow-y: auto;. Sehen Sie diese Plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

Legen Sie eine Matte-Symbolleiste am unteren Rand der Seite und verwenden Sie die folgende CSS-Spacer den Text zu zentrieren wie folgt .:

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

dieses CSS verwenden:

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

Um dies zu erhalten: