Angular Material 固定工具栏 AND 粘性页脚

我一直在追求我的脑海关于这个问题,看起来我发现了一个解决方案。 我想拥有一个固定的工具栏 /navbar/, 以及lipsky /漂浮的/ 页脚。 页脚应在主分区的底部浮动,但没有内容时粘在底部。 似乎我可以制作一个或另一个,但不是另一个。 使用此方法,工具栏已固定,但底部页脚不粘。 当主部分为空时,它将应用于工具栏。


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


下面的代码适用于粘滞页脚,但是该工具栏也会滚动。


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


它似乎是做我想做的事情的正确灵活性,但我不能完全做到这一点。

除此方法外,我还使用更传统的方法来实现粘性页脚的实现,使用所计算的主要横截面的高度
calc/100vh - header - footer/

. 我几乎了解它 BAM.. angular-material 我们决定调整工具栏的大小以及查看窗口的大小。 我可能会提交更改请求以使用间隙填充
<div flex=""></div>

在部分
md-content

, 但起初我想知道有人是否有更好的解决方案。
已邀请:

莫问

赞同来自:

最后,我意识到了什么问题。 在主要实质性部分下附加潜水时
md-content

有问题S. safari. 我通过添加纠正了它
flex="none"

在 div 顶层。

它仅适用于 Chrome:


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

君笑尘

赞同来自:

你必须使用
md-content

作为滚动的包装,将内容放在内部
flex

和页脚
flex="none"

. 它总是粘附在容器的底部。
md-content

, 既然他有
https://material.angularjs.org ... ldren

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


http://codepen.io/kuhnroyal/pen/YwrdLx

小明明

赞同来自:

也许这个片段可以帮助:


angular
.module/'myApp', ['ngMaterial']/
.controller/'MainCtrl', function/$scope/ {
console.log/'MainCtrl'/;
$scope.cards = [{
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}, {
text: 'Bla bla bla bla bla bla bla ',
title: 'Bla'
}];
$scope.displayContent = true;
$scope.displayLim = 100;
$scope.toggleContent = function/showContent/ {
$scope.displayContent = showContent;
};
}/;



<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" rel="stylesheet"/>
</head>
<body layout="row" ng-app="myApp" ng-controller="MainCtrl">
<div flex="" layout="column">
<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 flex="" layout="row">
<div flex="" layout="column">
<div ng-if="displayContent" ng-repeat="card in cards|limitTo: displayLim" style="background-color:SteelBlue;color:white;">body {{card.title}}</div>
<div flex="" style="background-color: red;"></div>
</div>
</md-content>
<div class="footer" layout="row" layout-align="center center">
<h2>My Footer</h2>
</div>
</div>
</body>

要回复问题请先登录注册