title: How to implement the classic "sticky footer" with angular-material?
body: <p>I recognize that the <a href="https://github.com/angular/material">Angular Material</a> implementation is a work in progress, but I've spent some time this morning trying to get familiar with it. However, I'm really struggling to get the concepts shown in the demos to work in a stand alone site.</p>
  
  <p>It seems that when the directives like <code>&lt;md-toolbar&gt;</code> and <code>&lt;md-content&gt;</code> are used in containers with fixed heights, then they work great. I'm struggling with how to throw them inside a <code>&lt;body</code> tag and be able to have a sticky footer layout <a href="https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/">like in this example</a>.</p>
  
  <p>I've tried many variations, but here's one example that doesn't work when the content is removed from the DOM. When the content is there it grows beyond the viewport and the footer is placed afterwards like you'd expect. In the latest versions of Chrome and Firefox this example keeps the footer at the bottom when the content is removed, but in IE this just doesn't work at all. In IE the footer floats just below the header regardless of whether the main content is shown or not.</p>
  
  <p><strong>DEMO:</strong> <a href="http://codepen.io/sstorie/pen/xbGgqb">http://codepen.io/sstorie/pen/xbGgqb</a></p>
  
  <pre><code>&lt;body ng-app="materialApp" layou-fill layout='column'&gt;
      &lt;div ng-controller="AppCtrl" layout='column' flex&gt;
        &lt;md-toolbar class='md-medium-tall'&gt;
          &lt;div class="md-toolbar-tools"&gt;
            &lt;span&gt;Fixed to Top&lt;/span&gt;
            &lt;span flex&gt;&lt;/span&gt;
            &lt;md-button class="md-raised" ng-click="toggleContent(!displayContent)"&gt;toggle content&lt;/md-button&gt;
          &lt;/div&gt;
        &lt;/md-toolbar&gt;
        &lt;main class='md-padding' layout="row" flex&gt;
          &lt;div flex&gt;
          &lt;md-card ng-if="displayContent" ng-repeat = "card in cards"&gt;
            {{$index}}
            {{card.title}}
            {{card.text}}
          &lt;/md-card&gt;
          &lt;/div&gt;
                 &lt;div flex&gt;
          &lt;md-card ng-if="displayContent" ng-repeat = "card in cards"&gt;
            {{$index}}
            {{card.title}}
            {{card.text}}
          &lt;/md-card&gt;
          &lt;/div&gt;
        &lt;/main&gt;
        &lt;md-toolbar class="md-medium-tall"&gt;
          &lt;div layout="row" layout-align="center center" flex&gt;
            &lt;span&gt;FOOTER&lt;/span&gt;
          &lt;/div&gt;
        &lt;/md-toolbar&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>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; };
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      min-height: 100%;
      height: auto !important;
      height: 100%;
  }
  </code></pre>
  
  <p>I'm definitely not a CSS guru, but it feels like this should be easy to do with the layout options in angular-material, so I'm hoping I'm really missing something obvious here.</p>