Angular Material - Почему липкий нижний колонтитул работает с версией 1.3.2, но не с версией 1.5.7

#angularjs

Вопрос:

Смотрите этот 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>

Это больше не работает. Кто-нибудь знает, как это исправить?

Ответ №1:

исправление заключается в удалении layout="column" или layout-fill в корневом разделе

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

Что происходит

Это больше не работает

Он все еще работает, но я думаю, что в новом angular-material.min.css <footer> загрузка в DOM с помощью layout-fill, layout-fill заставляет элемент layout заполнять его родительский контейнер, означает, что <footer>...</footer> размещенный в нижней части окна (родительский), а не страница (дочерняя <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/