Как реализовать классический "липкий нижний колонтитул" с angular -материалом?

Я понимаю, что реализация Angular Материал - это незавершенная работа, но я потратил некоторое время этим утром, пытаясь ознакомиться с ней. Тем не менее, я действительно стараюсь, чтобы концепции, показанные в демонстрационных записях, работали на отдельном сайте.

Кажется, что, когда директивы типа <md-toolbar> и <md-content> используются в контейнерах с фиксированной высотой, они отлично работают. Я изо всех сил пытаюсь бросить их внутри тега <body и иметь возможность иметь липкий макет как в этом примере.

Я пробовал много вариантов, но вот один пример, который не работает, когда содержимое удаляется из DOM. Когда контент там, он растет за пределами области просмотра, а нижний колонтитул помещается впоследствии, как и следовало ожидать. В последних версиях Chrome и Firefox этот пример поддерживает нижний колонтитул внизу, когда содержимое удаляется, но в IE это просто не работает вообще. В IE нижний колонтитул плавает чуть ниже заголовка независимо от того, отображается ли основное содержимое или нет.

DEMO: http://codepen.io/sstorie/pen/xbGgqb

<body ng-app="materialApp" layou-fill layout='column'>
    <div ng-controller="AppCtrl" layout='column' flex>
      <md-toolbar class='md-medium-tall'>
        <div class="md-toolbar-tools">
          <span>Fixed to Top</span>
          <span flex></span>
          <md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
        </div>
      </md-toolbar>
      <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>
               <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
      </main>
      <md-toolbar class="md-medium-tall">
        <div layout="row" layout-align="center center" flex>
          <span>FOOTER</span>
        </div>
      </md-toolbar>
    </div>
  </body>

JavaScript:

angular.module('materialApp', ['ngMaterial'])

.controller('AppCtrl', function($scope) {
    $scope.cards = [
    {text: 'Bla bla bla bla bla bla bla ',
     title: 'Bla' },
    ...repeat 10 times...
  ];

    $scope.displayContent = true;

    $scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});

CSS

body {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

Я определенно не гуру CSS, но похоже, что это должно быть легко сделать с вариантами макета в angular -материале, поэтому я надеюсь, что я действительно пропустил что-то очевидное здесь.

Ответ 1

Вы можете заставить это работать с небольшим обходным решением.

используйте min-height: calc(100vh - 176px) в элементе main, (176px = 2 * 88px для панелей инструментов md)
удалите layout='column' из корня div
удалите layout-fill layout='column' из тела

Я заменил материал css/js на версию CDN 0.8.3, так как мой IE10 сработал с этим количеством CSS/JS в кодеде.

Я тестировал это на Chrome, Firefox и IE10 - кажется, работает.

http://codepen.io/anon/pen/azgdOZ

Ответ 2

Нет необходимости в нижнем листе или что-то в этом роде. Использовать поведение flexbox, и вам хорошо идти:

Используйте атрибуты layout="column" и layout-fill в вашей основной оболочке (может быть ваш тег body).
Создайте свои разделы: header, main и footer.
Используйте flex атрибут на main.

Проверьте мой пример, на основе ручки @kuhnroyal.

Code | Полная страница

Ответ 3

Итак, я просто экспериментирую с angular -материалом, но то, что я сделал для этого, было

<div layout="column" layout-fill>
   <md-toolbar class="md-default-theme">
   <!-- your stuff -->
   </md-toolbar>
   <md-content layout-fill role="main">
      <!-- your main areas -->
   </md-content>
   <md-bottom-sheet>
      <div>I am a sticky footer</div>
   </md-bottom-sheet>
</div>

Я не экспериментировал достаточно, чтобы точно знать, делает ли это все, что хочет, но пока выглядит многообещающим. Обратите внимание, что если контент не ограничен, он, вероятно, будет постоянно толкать нижний лист вниз. если вы использовали overflow-y: auto в md-содержимом, он мог бы работать (у меня недостаточно моего приложения, которое еще не было выполнено)

Ответ 4

Я не нашел, что какой-либо из ответов надежно работает в браузерах без одного изъянов или другого.

Как указано в этом SO-ответе, это работает:

<md-toolbar></md-toolbar>
<md-content flex layout="column">
    <div layout="column" flex>
        <main flex="none"></main>
        <div flex></div>
        <footer flex="none"></footer>
    </div>
<md-content>

Здесь приведен пример codepen.