web-dev-qa-db-fra.com

Comment mettre en œuvre le "pied de page collant" classique avec un matériau angulaire?

Je reconnais que l'implémentation Angular Material est un travail en cours, mais j'ai passé un peu de temps ce matin à essayer de me familiariser avec. Cependant, j'ai vraiment du mal à faire fonctionner les concepts présentés dans les démos sur un site autonome.

Il semble que lorsque les directives comme <md-toolbar> et <md-content> sont utilisés dans des conteneurs avec des hauteurs fixes, puis ils fonctionnent très bien. J'ai du mal à les jeter dans un <body tag et pouvoir avoir une disposition de pied de page collante comme dans cet exemple .

J'ai essayé de nombreuses variantes, mais voici un exemple qui ne fonctionne pas lorsque le contenu est supprimé du DOM. Lorsque le contenu est là, il se développe au-delà de la fenêtre d'affichage et le pied de page est ensuite placé comme vous vous y attendez. Dans les dernières versions de Chrome et Firefox, cet exemple conserve le pied de page en bas lorsque le contenu est supprimé, mais dans IE cela ne fonctionne tout simplement pas à Dans IE le pied de page flotte juste en dessous de l'en-tête, que le contenu principal soit affiché ou non.

DEMO: http://codepen.io/sstorie/pen/xbGgqb

<body ng-app="materialApp" layou-fill layout='column'>
    <div ng-controller="AppCtrl" layout='column' flex>
      <md-toolbar class='md-medium-tall'>
        <div class="md-toolbar-tools">
          <span>Fixed to Top</span>
          <span flex></span>
          <md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
        </div>
      </md-toolbar>
      <main class='md-padding' layout="row" flex>
        <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
               <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
      </main>
      <md-toolbar class="md-medium-tall">
        <div layout="row" layout-align="center center" flex>
          <span>FOOTER</span>
        </div>
      </md-toolbar>
    </div>
  </body>

Javascript:

angular.module('materialApp', ['ngMaterial'])

.controller('AppCtrl', function($scope) {
    $scope.cards = [
    {text: 'Bla bla bla bla bla bla bla ',
     title: 'Bla' },
    ...repeat 10 times...
  ];

    $scope.displayContent = true;

    $scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});

CSS:

body {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

Je ne suis certainement pas un gourou CSS, mais il semble que cela devrait être facile à faire avec les options de mise en page dans le matériau angulaire, donc j'espère que je manque vraiment quelque chose d'évident ici.

angularjsmaterial-designangular-material
29
Sam Storie

Vous pouvez faire fonctionner cela avec une petite solution de contournement.

  • utilisez min-height: calc(100vh - 176px) sur votre élément main, (176px = 2 * 88px pour les barres d'outils md)
  • retirer le layout='column' à partir de la racine div
  • retirer le layout-fill layout='column' du corps

J'ai remplacé le matériau css/js par CDN version 0.8.3 car mon IE10 plantait avec cette quantité de CSS/JS dans un Codepen.

J'ai testé cela sur Chrome, Firefox et IE10 - semble fonctionner.

http://codepen.io/anon/pen/azgdOZ

21
kuhnroyal

Il n'est pas nécessaire d'avoir une feuille de fond ou quelque chose comme ça. Tirez parti du comportement flexbox et vous êtes prêt à partir:

  1. Utilisation layout="column" et layout-fill attributs sur votre wrapper principal (peut être votre balise body).
  2. Créez vos sections: header, main et footer.
  3. Utilisez l'attribut flex sur votre main.

Vérifiez mon exemple, basé sur @kuhnroyal pen.

Code | Page entière

24
Ravan Scafi

Donc j'expérimente juste avec du matériel angulaire mais ce que j'ai fait

<div layout="column" layout-fill>
   <md-toolbar class="md-default-theme">
   <!-- your stuff -->
   </md-toolbar>
   <md-content layout-fill role="main">
      <!-- your main areas -->
   </md-content>
   <md-bottom-sheet>
      <div>I am a sticky footer</div>
   </md-bottom-sheet>
</div>

Je n'ai pas suffisamment expérimenté pour savoir avec certitude si cela fait tout ce qu'ils veulent, mais cela semble jusqu'à présent prometteur. Notez que si votre contenu n'est pas contraint, il est probable que vous poussiez continuellement la feuille inférieure vers le bas. si vous avez utilisé un overflow-y: auto sur le contenu md, cela pourrait fonctionner (je n'ai pas encore assez de mon application construite pour tester)

7
jadrake

Je n'ai trouvé aucune réponse fiable sur tous les navigateurs sans un défaut ou l'autre.

Comme indiqué dans cette réponse SO , cela fonctionne:

<md-toolbar></md-toolbar>
<md-content flex layout="column">
    <div layout="column" flex>
        <main flex="none"></main>
        <div flex></div>
        <footer flex="none"></footer>
    </div>
<md-content>

Voici un codepen pour l'exemple.

5
creimers