我认识到Angular Material的实现是一项正在进行的工作，但是今天早上我花了一些时间来熟悉它。但是，我真的很难让演示中显示的概念在独立站点中工作。
似乎当指令喜欢<md-toolbar>并<md-content>在具有固定高度的容器中使用时，它们的效果很好。我正在努力解决如何将它们放入<body标签中并能够像本示例中那样具有粘性页脚布局。
我尝试了许多变体，但这里有一个示例在从 DOM 中删除内容时不起作用。当内容在那里时，它会超出视口，然后会像您期望的那样放置页脚。在最新版本的 Chrome 和 Firefox 中，此示例在删除内容时将页脚保留在底部，但在 IE 中这根本不起作用。在 IE 中，无论是否显示主要内容，页脚都浮动在页眉下方。
演示： http ://codepen.io/ssterie/pen/xbGgqb
<body ng-app="materialApp" layou-fill layout='column'>
<div ng-controller="AppCtrl" layout='column' flex>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
</div>
</md-toolbar>
<main class='md-padding' layout="row" flex>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
</main>
<md-toolbar class="md-medium-tall">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
</body>
Javascript：
angular.module('materialApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.cards = [
{text: 'Bla bla bla bla bla bla bla ',
title: 'Bla' },
...repeat 10 times...
];
$scope.displayContent = true;
$scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});
CSS：
body {
min-height: 100%;
height: auto !important;
height: 100%;
}
我绝对不是 CSS 专家，但感觉使用 angular-material 中的布局选项应该很容易做到这一点，所以我希望我在这里真的遗漏了一些明显的东西。