【发布时间】：2015-01-21 07:18:39
【问题描述】：
我知道Angular Material 的实现正在进行中，但今天早上我花了一些时间来熟悉它。但是，我真的很难让演示中显示的概念在独立站点中工作。
似乎当<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 专家，但感觉使用 angular-material 中的布局选项应该很容易做到这一点，所以我希望我真的错过了一些明显的东西。
【问题讨论】：
-
除了使用底纸之外，您找到解决方案了吗？
-
不，还没有一个可靠的工作。
-
只是想跟进我之前的评论，以防有人看到这个。接受的答案确实有效，虽然我希望我不需要在 CSS 中包含确切的像素高度，但它提供了我正在寻找的内容。
标签： angularjs material-design angular-material