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