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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich endlich herausgefunden, was das Problem war. Beim Schachteln von divs unter dem Haupt-Inhalt Teil
md-content
gab es ein Problem auf safari. Ich habe es behoben durch hinzufügenflex="none"
um die top-level-div.Dies funktioniert nur auf Chrome:
Dies funktioniert in Chrome und Safari:
Hier ist ein codepen für Ihre Lösung: codepen.io/creimers/pen/MewVOB
Froh zu hören, es hat geholfen..
Ihre codepen hat buchstäblich nichts zu tun mit dieser mechanik dieser Lösung
InformationsquelleAutor
Sollten Sie verwenden
md-content
als scroll-wrapper, stellen Sie Ihre Inhalte innen mitflex
- und Fußzeile mitflex="none"
. Es wird immer stick an der Unterseite desmd-content
container da, ein CSS -overflow: auto
. eckig-material-Layouts Kindercodepen
Ich aktualisierte mein Stift, aber ich bin nicht sicher, ob das behebt alles. Nicht ios verfügbar atm. Es funktioniert auf android-chrome. Es gibt derzeit viele offene Fragen in eckig-material über ios Probleme. Die Safari sind u verwenden?
Ich werde upvote, weil diese meist das Problem gelöst. Kann es sein, dass meine einzige Möglichkeit ist, in einer bugfix-request auf github.
InformationsquelleAutor