角材固定工具栏和粘脚 [英] Angular Material fixed toolbar AND sticky footer
问题描述
< body ng-controller =MainCtrllayout =row>
< div layout =columnflex>
< md-toolbar class =md-medium-tall>
< div class =md-toolbar-tools>
< span> HEADER< / span>
< span flex>< / span>
< md-button class =md-raisedng-click =toggleContent（！displayContent）> onOff< / md-button>
< span flex>< / span>
< md-button class =md-raisedng-click =toggleNum（）> half / full< / md-button>
< / div>
< / md-toolbar>
< md-content>
< div layout =columnflex>
< div ng-if =displayContentstyle =background-color：SteelBlue; color：white; ng-repeat =card in cards | limitTo：displayLim> body {{card.title}}< / div>
< div style =background-color：red;挠曲>< / DIV>
< div style =background-color：orange; color：white; >页脚项目< / div>
< / div>
< / md-content>
< / div>
< / body>
下面的代码用作粘滞页脚，但是工具栏也会滚动。
< body ng-controller =MainCtrllayout =row>
< div layout =columnflex>
< md-toolbar class =md-medium-tall>
< div class =md-toolbar-tools>
< span> HEADER< / span>
< span flex>< / span>
< md-button class =md-raisedng-click =toggleContent（！displayContent）> onOff< / md-button>
< span flex>< / span>
< md-button class =md-raisedng-click =toggleNum（）> half / full< / md-button>
< / div>
< / md-toolbar>
< div layout =columnflex>
< div ng-if =displayContentstyle =background-color：SteelBlue; color：white; ng-repeat =card in cards | limitTo：displayLim> body {{card.title}}< / div>
< div style =background-color：red;挠曲>< / DIV>
< div style =background-color：orange; color：white; >页脚项目< / div>
< / div>
< / div>
< / body>
这似乎是正确的flex方法来完成我想要做的事情，但我不能得到它完美。除此之外，我还使用了一个更传统的方法来实现一个粘滞的页脚，使用计算的主要部分的高度从 calc（100vh - header - footer ）。我几乎已经知道了当BAM ..角材料决定使他们的工具栏大小改变与视口的大小。我可能会要求更改请求，以便在中填入部分，但我想知道是否有人有更好的解决方案。< div flex>< / div> md-content
我终于明白了问题所在。当在 md-content 的主要内容部分嵌套div时，Safari浏览器出现了一个问题。我通过在顶级div中添加 flex =none来修复它。
< md-content layout =columnflex>
< div flex layout =column>
< section>
< div ng-if =displayContentstyle =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 =nonestyle =background-color：orange; color：white;>
< div>页脚项目< / div>
< / footer>
< / div>
< / md-content>
这适用于Chrome和Safari：
< md-content layout =columnflex>
< div flex layout =column>
< section flex =none>
< div ng-if =displayContentstyle =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 =nonestyle =background-color：orange; color：white;>
< div>页脚项目< / div>
< / footer>
< / div>
< / md-content>
I have been beating my head against this issue for some time now and sort of came up with a solution. I would like a fixed toolbar (navbar) as well as a sticky (floating) footer. The footer should float at the bottom of the main section but be sticky to the bottom when there is no content. It seems that I can do one or the other but not both. With this method the toolbar is fixed but the footer isn't sticky. It butts up to the toolbar when the main section is empty.
<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>
The below code works as a sticky footer but then the toolbar scrolls as well.
<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>
This seems like the proper flex way to accomplish what I'm trying to do but I just cant get it perfect.
Besides this method I have also used a more traditional approach of implementing a sticky footer using calculated main section height from calc(100vh - header - footer). I nearly had it figured out when BAM.. angular-material decided to make their toolbar size change with viewport size. I'm probably going to put in a change request so that I can use a gap filling <div flex></div> in the md-content section but I wanted to find out if anyone has a better solution first.
I finally figured out what the issue was. When nesting divs under the main content part of md-content there was an issue on safari. I fixed it by adding flex="none" to the top level div.
This works only on 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>
This works on Chrome and 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>
这篇关于角材固定工具栏和粘脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
