web-dev-qa-db-fra.com

Comment créer un pied de page fixe dans la conception de matériaux angularjs

Ceci est ma mise en page.

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

Le pied de page s'affiche actuellement juste après le contenu principal. en fonction de la taille du pied de page principal qui s'affiche quelque part au milieu de l'écran ou descend en dessous de la hauteur de la page.

Je veux que le pied de page soit toujours fixé en bas de l'écran. et selon la taille du principal, il devrait y avoir un défilement dans le contenu principal.

quelqu'un peut-il m'aider à ce sujet?

htmlcssangularjsmaterial-designangular-material
10
Devesh Agrawal

Vous avez juste besoin d'ajouter <main flex> et css overflow-y: auto;. Voir ce plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

11
Captain