Angular Material 粘性页脚，同时在页脚下方的内容幻灯片上保留 flex 高度答案

【问题标题】：Angular Material sticky footer while retaining flex height on content slides under footerAngular Material 粘性页脚，同时在页脚下方的内容幻灯片上保留 flex 高度
【发布时间】：2017-10-05 22:22:15
【问题描述】：

尝试使用最新版本 (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）。

【问题讨论】：

标签： angularjs flexbox angular-material

【解决方案1】：

将main 标记替换为md-content 指令，这更适合可滚动的内容。

更新codepen

问候

【讨论】：

对不起，我应该在问题中提到这一点，但我不希望滚动条只出现在内容上 - 它应该出现在整个正文上。此外，我只希望在内容不够高而无法将其向下推时使页脚保持粘性。如果我的页脚高 300 像素怎么办？它会一直占用这么多屏幕。只是傻。