Barre d'outils fixe angulaire et pied de page collant

J'ai été me frappant la tête contre ce problème pour un certain temps maintenant, et est venu avec une solution. Je voudrais fixe la barre d'outils (barre de navigation) ainsi que d'un collant (flottant) le pied de page. Le pied de page devrait flotter au bas de la section principale, mais être collante vers le bas quand il n'y a pas de contenu. Il semble que je peux faire l'un ou l'autre mais pas les deux. Avec cette méthode, la barre d'outils est fixe, mais le pied de page n'est pas collante. Il bute sur la barre d'outils lorsque la section principale est vide. 

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>


    <md-content>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
            <div style="background-color: red;" flex></div>
            <div style="background-color:orange;color:white;" >footer item</div>
        </div>  
    </md-content>           
  </div>    
</body>

Le code ci-dessous fonctionne comme un collant, pied de page, mais ensuite la barre d'outils des parchemins. 

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>

    <div layout="column" flex>
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
      <div style="background-color: red;" flex></div>
      <div style="background-color:orange;color:white;" >footer item</div>
    </div>  
  </div>    
</body>

Cela semble être le bon flex moyen d'accomplir ce que je suis en train de faire, mais j'ai juste ne peux pas obtenir la perfection.

Outre cette méthode, j'ai également utilisé une approche plus traditionnelle de la mise en œuvre d'un collant, pied de page à l'aide calculée de la section principale de la hauteur de calc(100vh - header - footer). J'ai presque trouvé quand BAM.. angulaires-le matériel décidé de faire de leur barre d'outils de modification de la taille avec la taille de la fenêtre. Je vais probablement mettre dans une demande de modification de sorte que je peux utiliser un comblement des lacunes <div flex></div> dans le md-content l'article mais je voulais savoir si quelqu'un a une meilleure solution.

source d'informationauteur Brian Baker | 2016-01-11

  1. 13

    J'ai enfin compris ce que le problème a été. Lors de l'imbrication de divs en vertu de l'essentiel du contenu de la partie de md-content il y a un problème sur safari. Je l'ai corrigé en ajoutant flex="none" de haut niveau de la div.

    Cela ne fonctionne que sur Chrome:

    <md-content layout="column" flex>
 <div flex layout="column">
  <section>
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

    Cela fonctionne sur Chrome et Safari:

    <md-content layout="column" flex>
 <div flex layout="column">
  <section flex="none">
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>
  2. 4

    Vous devez utiliser md-content défilement wrapper, mettre votre contenu à l'intérieur avec flex et le pied de page avec flex="none". Il sera toujours coller au fond de la md-content conteneur depuis qui a un CSS overflow: auto. angulaire d'une disposition matérielle des enfants

      <md-toolbar class="md-medium-tall">
    <div class="md-toolbar-tools">
      <span>HEADER</span>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
    </div>
  </md-toolbar>

  <md-content layout="column" flex>
    <div flex layout="column">
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
    </div>
    <footer flex="none" style="background-color:orange;color:white;">
      <div>footer item</div>
    </footer>
  </md-content>

    codepen