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

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

Il semble que lorsque les directives comme <md-toolbar> et <md-content> sont utilisées dans des conteneurs avec des hauteurs fixes, elles fonctionnent très bien. Je me bats avec la façon de les jeter à l'intérieur d'une balise <body et être capable d'avoir une mise en page 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 placé ensuite comme prévu. Dans les dernières versions de Chrome et Firefox, cet exemple maintient le pied de page en bas lorsque le contenu est supprimé, mais dans IE cela ne fonctionne tout simplement pas du tout. Dans IE le pied de page flotte juste en dessous de l'en tête indépendamment du fait que le le contenu principal est affiché ou non.

DÉMO: 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 angular-material, donc j'espère qu'il me manque vraiment quelque chose d'évident ici.

29
demandé sur Sam Storie 2014-11-23 17:56:55

4 réponses

Vous pouvez faire en sorte que cela fonctionne 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)
  • supprimer le layout='column' de la racine div
  • supprimer la layout-fill layout='column' du corps

J'ai remplacé le matériel css / js par CDN version 0.8.3 puisque mon IE10 se bloquerait avec cette quantité de CSS / JS dans un Codepen.

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

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

21
répondu kuhnroyal 2015-04-09 10:06:46

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

  1. utilisez les attributs layout="column" et layout-fill sur votre wrapper principal (peut être votre balise body).
  2. Créer vos sections: header, main et footer.
  3. Utiliser flex attribut sur votre main.

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

Code | Pleine Page

24
répondu Ravan 2015-04-14 19:50:26

Donc, je suis juste en train d'expérimenter avec du matériel angulaire, mais ce que j'ai fait pour cela était 

<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 assez expérimenté pour savoir avec certitude si cela fait tout ce qu'ils veulent, mais est si loin semble prometteur. Remarque Si votre contenu n'est pas contraint, il pousserait probablement continuellement la feuille inférieure vers le bas. si vous avez utilisé un overflow-y: auto sur le md-content, cela pourrait fonctionner (je n'ai pas encore assez de mon application construite pour tester)

7
répondu jadrake 2014-12-31 16:21:09

Je n'ai trouvé aucune des réponses fonctionnant de manière fiable sur les navigateurs sans un défaut ou l'autre.

Comme indiqué dans ce donc répondre , 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
répondu creimers 2017-05-23 12:32:06