Я признаю, что реализация Angular Material является незавершенной, но я потратил некоторое время этим утром, пытаясь ознакомиться с ней. Тем не менее, я действительно стараюсь, чтобы концепции, показанные в демонстрационных записях, работали на отдельном сайте.Как реализовать классический «липкий нижний колонтитул» с угловым материалом?
Кажется, что, когда директивы типа <md-toolbar> и <md-content> используются в контейнерах с фиксированными высотами, то они отлично работают. Я борюсь с тем, как бросить их в тег <body и иметь возможность иметь липкую компоновку нижнего колонтитула like in this example.
Я пробовал много вариантов, но вот один пример, который не работает, когда содержимое удаляется из 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 гуру, но он чувствует, как это должно быть легко сделать с вариантами макета в угловом материале, поэтому я h Мне действительно не хватает чего-то очевидного здесь.
Вы нашли решение, используя нижний лист? –
Нет, еще никто не работает надежно. –
Просто хотел следить за моим предыдущим комментарием на случай, если кто-то просто взглянет на это. Принятый ответ действительно работает, и, хотя мне жаль, что мне не нужно включать точные высоты пикселей в CSS, он обеспечивает то, что я искал. –