Winkel-Material behoben-Symbolleiste UND sticky footer

Habe ich schon schlägt meinen Kopf gegen dieses Problem seit einiger Zeit und irgendwie kam mit einer Lösung. Ich möchte eine Feste toolbar (Navigationsleiste) als auch als sticky (floating) Fußzeile. Die Fußzeile sollte der Schwimmer an der Unterseite der main-Sektion, aber noch klebrig an der Unterseite, wenn es keine Inhalte. Es scheint, dass ich tun kann eine oder andere, aber nicht beides. Mit dieser Methode wird die Symbolleiste fixiert ist, aber der footer ist nicht klebrig. Es stößt auf der Symbolleiste, wenn der main-Sektion ist leer.

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

Den code unten funktioniert als sticky footer, aber dann die Symbolleiste Schriftrollen als gut.

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

Diese scheint wie die richtige flex-Weg zu erreichen, was ich bin versucht zu tun, aber ich kann Sie nicht einfach es perfekt zu bekommen.

Neben dieser Methode habe ich auch verwendet einen eher traditionellen Ansatz der Umsetzung eines sticky footer mit berechnet Hauptteil Höhe von calc(100vh - header - footer). Ich bin fast hatte es herausgefunden, wenn BAM.. eckig-material entschieden, um Ihre Symbolleiste, Größe ändern, mit der viewport-Größe. Ich bin wohl zu setzen, die in einen change request so, dass ich eine Lücke füllen <div flex></div> im md-content Abschnitt, aber ich wollte herausfinden, ob jemand eine bessere Lösung zuerst.

InformationsquelleAutor Brian Baker | 2016-01-11

Schreibe einen Kommentar