Angular Материал фиксированной панели инструментов И липкий нижний колонтитул

Я уже несколько лет бил головой об этой проблеме, и вроде как придумал решение. Мне нужна фиксированная панель инструментов (navbar), а также липкий (плавающий) нижний колонтитул. Нижний колонтитул должен плавать в нижней части основной секции, но быть липким на дно, когда нет содержимого. Кажется, я могу сделать то или другое, но не то, и другое. С помощью этого метода панель инструментов фиксирована, но нижний колонтитул не является липким. Он прижимается к панели инструментов, когда основной раздел пуст.

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>


    <md-content>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
            <div style="background-color: red;" flex></div>
            <div style="background-color:orange;color:white;" >footer item</div>
        </div>  
    </md-content>           
  </div>    
</body>

Нижеприведенный код работает как липкий нижний колонтитул, но затем панель инструментов также прокручивается.

<body ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>

    <div layout="column" flex>
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
      <div style="background-color: red;" flex></div>
      <div style="background-color:orange;color:white;" >footer item</div>
    </div>  
  </div>    
</body>

Это похоже на правильный гибкий способ выполнить то, что я пытаюсь сделать, но я просто не могу его улучшить.

Помимо этого метода я также использовал более традиционный подход к реализации липкого нижнего колонтитула с использованием расчетной высоты основного раздела от calc(100vh - header - footer). Я почти понял, когда BAM.. angular -материал решил изменить размер панели инструментов с размером видового экрана. Я, вероятно, собираюсь внести запрос на изменение, чтобы я мог использовать пробел, заполняющий <div flex></div> в разделе md-content, но я хотел узнать, есть ли у кого-то лучшее решение в первую очередь.

Ответы

Ответ 1

Наконец-то я понял, в чем проблема. При вложенности divs в основной части содержимого md-content была проблема с сафари. Я исправил его, добавив flex="none" в div верхнего уровня.

Это работает только в Chrome:

<md-content layout="column" flex>
 <div flex layout="column">
  <section>
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

Это работает в Chrome и Safari:

<md-content layout="column" flex>
 <div flex layout="column">
  <section flex="none">
    <div ng-if="displayContent" style="min-height:20px;background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim track by $index">{{card.title}}
    </div>
  </section>
  <div flex></div>
  <footer flex="none" style="background-color:orange;color:white;">
    <div>footer item</div>
  </footer>
 </div>
</md-content>

Ответ 2

Вы должны использовать md-content в качестве оболочки прокрутки, поместить содержимое внутри flex и нижний колонтитул с помощью flex="none". Он всегда будет придерживаться нижней части контейнера md-content, поскольку имеет CSS overflow: auto. angular - материальные макеты детей

  <md-toolbar class="md-medium-tall">
    <div class="md-toolbar-tools">
      <span>HEADER</span>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
      <span flex></span>
      <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
    </div>
  </md-toolbar>

  <md-content layout="column" flex>
    <div flex layout="column">
      <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
    </div>
    <footer flex="none" style="background-color:orange;color:white;">
      <div>footer item</div>
    </footer>
  </md-content>

codepen

Ответ 3

Возможно, этот фрагмент может помочь:

angular
  .module('myApp', ['ngMaterial'])
  .controller('MainCtrl', function($scope) {
    console.log('MainCtrl');
    $scope.cards = [{
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }, {
      text: 'Bla bla bla bla bla bla bla ',
      title: 'Bla'
    }];
    $scope.displayContent = true;
    $scope.displayLim = 100;
    $scope.toggleContent = function(showContent) {
      $scope.displayContent = showContent;
    };
  });

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.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-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>
<body ng-app="myApp" ng-controller="MainCtrl" layout="row">

  <div layout="column" flex>
    
    <md-toolbar class="md-medium-tall">
        <div class="md-toolbar-tools">
            <span>HEADER</span>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
            <span flex></span>
            <md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
        </div>
    </md-toolbar>
    
    <md-content layout="row" flex>
        <div layout="column" flex>
            <div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}</div>
            <div style="background-color: red;" flex></div>
        </div>  
    </md-content>
    
    <div layout="row" class="footer" layout-align="center center">
      <h2>My Footer</h2>
    </div>
    
  </div>    
</body>