我认识到
Angular Material实现是一个正在进行的工作，但我今天上午花了一些时间来熟悉它。但是，我真的很难得到在演示中显示的概念在一个独立的网站工作。
原文链接：https://www.f2er.com/angularjs/145173.html看起来当像< md-toolbar>和< md-content>在具有固定高度的容器中使用，那么它们工作得很好。我努力与如何将他们扔在一个< body标签，并能够有一个粘性页脚布局like in this example。
我试过很多变化，但是这里有一个例子，当内容从DOM中删除时不工作。当内容存在时，它会超出视口，页脚会放置在后面，就像你所期望的那样。在最新版本的Chrome和Firefox中，此示例会在删除内容时将页脚保留在底部，但在IE中，这根本不起作用。在IE中，页脚浮动在标题下方，无论是否显示主要内容。
演示：http://codepen.io/sstorie/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古茹，但它感觉像这应该很容易做的角度材料的布局选项，所以我希望我真的错过了明显的这里。
