Angular Material sticky footer while retaining flex height on content slides under footer

Question

Trying to get an angular material sticky footer working with the latest version (1.1.4). This looks like it worked in older versions (am 0.8.3), but now the content seems to slide under the footer. I have tried a different method, but that doesn't maintain the flex on the content, so I wont be able to center content vertically as I want to.

<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

NOTE: I want the scrollbar to be on the entire body (not just on content), and the footer should be sticky only when content is not tall enough to push it to the bottom of the page. Otherwise, it should fall under the content (much like stackoverflow.com does).

Answer 1

replace main tag with md-content directive, which is more suited for scroll able content.

updated codepen

regards