Angular 2 + Material 2：带有md工具栏的Sticky Footer

Question

我实际上尝试使用md-toolbar组件在angular2 / Material2应用程序中制作粘性页脚。

也许这不是一个合适的元素，但这样做会很好，因为它适合没有附加代码的app风格。

我使用的是Angular 2（CLI），Material2（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＆＃34;页脚＆＃34;班级认为：

.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>

这里我使用Angular Material和Flexlayout创建了一个演示

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

并查看我的git repo

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