角度材料粘性页脚，同时在页脚下的内容幻灯片上保持弯曲高度

Question

尝试使用最新版本（1.1.4）获得角度材料粘性页脚。看起来它在旧版本中工作（上午0.8.3），但现在内容似乎在页脚下滑动了。我尝试了一种不同的方法，但这并不能保持内容的灵活性，所以我不能按照自己的意愿垂直居中。

<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>

https://codepen.io/anon/pen/mmqQzG

注意：我希望滚动条位于整个主体上（不仅仅是内容），只有当内容不够高而无法将其推到页面底部时，页脚才应该是粘性的。否则，它应该属于内容（很像stackoverflow.com）。