Angular Materialの実装が進行中の作業であることは認識していますが、今朝はそれに慣れるために時間を費やしました。ただし、デモに示されている概念をスタンドアロンのサイトで機能させるのに本当に苦労しています。
ディレクティブ like<md-toolbar>と<md-content>が固定高さのコンテナーで使用されると、うまく機能するようです。それらをタグ内にスローして、この例のように<body粘着性のあるフッター レイアウトを作成する方法に苦労しています。
多くのバリエーションを試しましたが、コンテンツが DOM から削除された場合に機能しない例を 1 つ示します。コンテンツがそこにあるとき、それはビューポートを超えて成長し、フッターはあなたが期待するようにその後に配置されます. Chrome と Firefox の最新バージョンでは、この例はコンテンツが削除されたときにフッターを下部に保持しますが、IE ではこれはまったく機能しません。IE では、メイン コンテンツが表示されているかどうかに関係なく、フッターはヘッダーのすぐ下に表示されます。
デモ: http://codepen.io/sstory/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 のレイアウト オプションを使用すると、これを簡単に行うことができるように思われるので、ここで明らかな何かが本当に欠けていることを願っています。