Classic "sticky footer" with angular-material

classic-sticky-footer-with-angular-material.markdown

Classic "sticky footer" with angular-material

http://stackoverflow.com/questions/27090257/how-to-implement-the-classic-sticky-footer-with-angular-material

A Pen by Stan Williams on CodePen.

License.

index.html

<div ng-app="materialApp" ng-controller="AppCtrl" layout="column" layout-fill>
    <header>
        <md-toolbar class='md-medium-tall'>
          <div class="md-toolbar-tools">
              <h1>Fixed to Top</h1>
              <span flex></span>
              <md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
          </div>
        </md-toolbar>
    </header>
    <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>
    </main>
    <footer>
        <div layout="row" layout-align="center center">
            <h2>My Awesome Footer</h2>
        </div>
    </footer>
</div>

script.js

angular
    .module('materialApp', ['ngMaterial'])
    .controller('AppCtrl', function($scope) {
        $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.toggleContent = function(showContent) {
            $scope.displayContent = showContent;
        };
    });

style.css

md-card {
  padding: 20px;
}

footer {
  background-color: #ccc;
}