Bri*_*ker 12 sticky-footer flexbox angularjs angular-material
一段时间以来,我一直在反对这个问题,有点想出一个解决方案.我想要一个固定的工具栏(导航栏)以及一个粘性(浮动)页脚.页脚应浮动在主要部分的底部,但在没有内容时会粘到底部.似乎我可以做一个或另一个,但不能两者兼而有之.使用此方法,工具栏是固定的,但页脚不粘.当主要部分为空时,它会对齐工具栏.
<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>
下面的代码用作粘性页脚,但随后工具栏也会滚动.
<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>
这似乎是适当的灵活方式来完成我想要做的事情,但我不能让它完美.
除了这种方法,我还使用了一种更传统的方法,使用计算出的主要截面高度来实现粘性页脚calc(100vh - header - footer).当BAM时,我几乎想到了它.角度材料决定使它们的工具栏大小随视口大小而变化.我可能会提出一个更改请求,以便我可以<div flex></div>在该md-content部分填写空白,但我想知道是否有人有一个更好的解决方案.
Bri*_*ker 14
我终于找到了问题所在.当在主要内容部分下嵌入div时,md-content在safari 上存在问题.我通过添加flex="none"到顶级div来修复它.
这仅适用于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>
这适用于Chrome和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>
| 归档时间： |
|
| 查看次数： |
32021 次 |
| 最近记录： |