Question

请参阅此codepen：https://codepen.io/rscafi/pen/bNXRxY，使用angular 1.3.2制作粘性页脚的示例：

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">

如果您将版本从1.3.2更改为1.5.7，请执行以下操作：

<link rel = "stylesheet" href = "//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel = "stylesheet" href = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material Dependencies -->
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-sanitize.min.js"></script>

 <!-- Angular Material Library -->
 <script src = "//ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
 <script src = "//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>

它不再起作用了。有谁知道如何解决这个问题？

Answer 1

此修复程序会删除根div中的layout="column"或layout-fill

<div ng-app="materialApp" ng-controller="AppCtrl" layout="column" layout-fill>

发生了什么

它不再起作用了

仍在工作但我认为在新的 angular-material.min.css 中，<footer>通过布局填充，布局填充加载到DOM中强制layout元素填充其父容器，意味着放置在窗口底部的<footer>...</footer>（父）而不是页面（child <div>...</div>）

https://material.angularjs.org/latest/layout/options

更新

此外，如果你想要它粘性你甚至不需要删除但添加更多，所以你将页面分成3个部分 <md-toolbar>和<md-content>

更新

使用

编辑CSS文件

md-content {
  min-height: calc(100vh - 176px)
}

检查出来

http://embed.plnkr.co/4TEtW9eQK0iXH4GYhSe9/

Angular Material - 为什么粘性页脚适用于版本1.3.2，而不适用于版本1.5.7

1 个答案:

更新

更新