1. дома
  2. Вопрос и ответ
  3. Угловой материал с фиксированной панелью и липким нижним колонтитулом

Угловой материал с фиксированной панелью и липким нижним колонтитулом

2016-01-11 5 views
11

Я уже несколько лет бил головой об этом вопросе и вроде как придумал решение. Мне нужна фиксированная панель инструментов (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-material решил изменить размер панели инструментов с размером видового экрана. Я, вероятно, собираюсь внести запрос на изменение, чтобы использовать пробел <div flex></div> в разделе md-content, но я хотел выяснить, есть ли у кого-то лучшее решение.

источник

2016-01-11 Brian Baker

ответ

13

я, наконец, понял, что этот вопрос. При вложенности 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>

источник

2016-01-27 05:14:41

+0

Не удалось выложить достаточно. – creimers

+2

Вот код для вашего решения: http: // codepen.io/creimers/pen/MewVOB – creimers

+0

Приятно было услышать, что это помогло .. –

2

Может быть, этот фрагмент может помочь:

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>

источник

2016-01-11 15:19:05 beaver

+0

Спасибо за ответ, и это очень близко. Я отредактировал свой ответ, потому что забыл упомянуть, что хочу, чтобы нижний колонтитул плавал в нижней части основного содержимого. В вашем примере это фиксируется как панель инструментов. –

4

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

<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

источник

2016-01-17 14:05:06 kuhnroyal

+1

Это решение проблемы на рабочем столе, но мобильное (ios в любом случае), это нарушает поведение прокрутки. Он изменяет размеры разделов содержимого, чтобы они соответствовали экрану. Когда я устанавливаю минимальную высоту, чтобы исправить это, нижний колонтитул остается фиксированным в середине содержимого. Вот разветвленная [codepen] (http://codepen.io/anon/pen/adLrLL). Просмотрите его как на рабочем столе, так и на мобильном устройстве. Есть идеи? –

+0

Я обновил свою ручку, но не уверен, что это что-то исправить. Недоступно ios atm. Он работает на андроиде хром. В настоящее время существует множество открытых проблем в угловом материале о проблемах с ios. Какой Safari вы используете? – kuhnroyal

+1

Я поднимусь, потому что это в основном решило проблему. Может быть, мой единственный вариант - включить запрос bugfix в github. –

 Смежные вопросы

  • Нет связанных вопросов^_^