Угловой 2 + Материал 2: Липкий нижний колонтитул с панелью инструментов md

Question

На самом деле я пытаюсь сделать липкий нижний колонтитул в приложении angular2/Material2 из компонента md-toolbar.

Возможно, это просто не подходящий элемент, но было бы неплохо сделать это таким образом, так как он соответствовал бы стилю приложения без дополнительного кода.

Я использую Угловое 2 (CLI), Материал2 (https://github.com/angular/material2) и Flex Layout (https://github.com/angular/flex-layout)

Вот пример кода, что приложение выглядит следующим образом:

<md-sidenav-container class="sd-layout"> 
    <md-sidenav #sidenav class="app-sidenav" mode="push"> 
     //My links in the sidenav 
    </md-sidenav> 
    <md-toolbar color="primary"> 
     //Here is the "REAL" toolbar, on top of page, with app name, and so on 
    </md-toolbar> 
    <router-outlet> 
     //Here is the application display, routing, navigation, security, all the magic happens here 
    </router-outlet> 
    <my-footer> 
     //Here is the custom footer I tried to make... 
    </my-footer> 
</md-sidenav-container> 

Таким образом, в основном, ничего странного в этом коде ... Теперь элемент шаблона сноска:

<md-toolbar class="footer"> 
    //Here is my footer 
</md-toolbar> 

CSS класс «сноска» держит это:

.footer { 
    position:relative; 
    right:0; 
    left:0; 
    bottom:0; 
} 

И снова ничего волшебного ... В этот момент нижний колонтитул появляется прямо под розеткой. Хороший, но не достаточно: если маршрутизатор розетка пуста или не достаточно, чтобы соответствовать страницы (высота устройства) в высоту, то он оставляет пустое пространство под ним, так что мы получили этот вид дисплея:

Что я хотел бы получить в результате:

Спасибо за чтение/помощь

Answer 1

Вы можете использовать это: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

<div class="maindiv"> 
<md-toolbar>your toolbar</md-toolbar> 
<md-sidenav-container>your menu</md-sidenav-container> 

    <div class="site"> 
     <div class="content"> 
     <router-outlet></router-outlet> 
     </div> 
     <footer> 
      <p>footer</p> 
     </footer> 
    </div> 
</div> 

конец CSS:

.maindiv { 
    min-height: 100vh; 
} 

.site{ 
    display: flex; 
    flex-direction: column; 
    min-height: 94vh; 
} 

.content{ 
    flex: 1; 
} 

Answer 2

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

<mat-sidenav-container class="container"> 
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav> 
<mat-sidenav-content> 
    <div fxLayout="column" style="height:100vh;"> 
     <div fxFlex>content goes here</div> 
     <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div> 
    </div> 
</mat-sidenav-content> 

Здесь я создал демо с помощью Угловой материал anf Flexlayout

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

и посмотреть на мою мерзавца репо

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter