Angular 2材质中的粘性页脚 [英] Sticky footer in Angular 2 Material

问题描述

我已经搜索了大约3个小时，因为我不想问，但是如何在底部保留一个页脚"变量，而不是在底部固定它，所以如果内容我的体积很小，它不会只停留在页面的一半，但是如果我有很多信息，它就不会锁定在页面底部，而是在滚动时位于数据上方

I have been searching and searching for about 3 hours now because I didn't want to have to ask, but how can I keep a 'footer' variable at the bottom but not like fixed at the bottom, so if the content I have is very small it won't just sit halfway in the page but if I have lots of information it won't lock right at the bottom of the page and sit there over data while you scroll

我尝试了几种方法，包括: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html 以及与此有关的大多数问题，这些问题我已经测试过并且失败了，或者似乎根本没有起作用.

I have tried several ways including this: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html and most questions related to this I've tested and failed with or don't seem to work at all.

这里是我当前的代码:

<div class="content">
  <app-navbar></app-navbar>
  <app-footer></app-footer>
</div>

和<app-content></app-content>在导航栏中，因为导航栏控制整页sidenav.

and the <app-content></app-content> is within the navbar because the navbar controls a fullpage sidenav.

整个应用导航栏如下所示:

The whole app-navbar looks like this:

<mat-sidenav-container fullscreen>

  <mat-sidenav mode="push" #sidenav>
    <div fxLayout="column">
      <mat-toolbar fxLayoutAlign="center center" color="primary">
        <button mat-icon-button routerLink="/home" (click)="sidenav.close()">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-toolbar>
      <button mat-button routerLink="/dashboard" (click)="sidenav.close()" >Information</button>
      <button mat-button routerLink="/second" (click)="sidenav.close()" >Web tools</button>
    </div>
  </mat-sidenav>
  <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-xs>
      <mat-icon>menu</mat-icon>
    </button>

    <div fxLayout="row">
      <button fxLayout="flex-shrink: 0;" mat-button class="title" style="font-size: 25px;">{{this.title}}</button>
      <button fxShow="false" fxShow.gt-xs mat-button routerLink="/dashboard" [matMenuTriggerFor]="infoMenu">Information</button>
      <button fxShow="false" fxShow.gt-xs mat-button routerLink="/second" [matMenuTriggerFor]="toolsMenu">Web tools</button>
    </div>
    <!-- fxFlex will fill the empty space and push the following items to the right -->
    <div fxFlex></div>
    <button mat-icon-button>
      <mat-icon>face</mat-icon>
    </button>
  </mat-toolbar>
  <app-container></app-container>

</mat-sidenav-container>

页脚只是一个超级基本组件，看起来像这样:

And the footer is just a super basic component that looks like this:

<mat-toolbar>
  <div class="container">
    <span>this is a toolbar</span>
  </div>
</mat-toolbar>

到目前为止，仅应用样式ive是这样的:

Only styling ive applied so far is this:

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
.title {
  font-family: "Comfortaa";
}
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}

在全局style.css文件中.

Which is in the global style.css file.

推荐答案

使用Flexbox的方法:

使用Flexbox时，我们可以获得清洁剂解决方案.我的解决方案还将涵盖页面的第一部分应占高度的100％.通常需要这样做来适当地放置元素或与背景一起使用.该代码与材料2的当前版本相匹配-在撰写本文时为2.0.0-beta.12.

When we utilize Flexbox we can get a cleaner solution. Also my solution will cover that the first component of your page should take 100% of the height. This is often needed to position elements appropriately or to work with backgrounds. The code matches the current version of Material 2 - at the time of writing this is 2.0.0-beta.12.

标记:

<mat-sidenav-container class="all-wrap" fullscreen>
  <mat-sidenav #sidenav>
    <mat-list>
      <mat-list-item [routerLink]="['/']"> Foo</mat-list-item>
      <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item>
    </mat-list>
  </mat-sidenav>

  <div class="page-wrap">
    <header role="banner">
      <mat-toolbar color="primary">
        <button
          type="button"
          mat-icon-button
          (click)="sidenav.open()"
          title="Open sidenav">
          <mat-icon>menu</mat-icon>
        </button>
        Your Toolbar
      </mat-toolbar>
    </header>
    <main class="content">
      <router-outlet></router-outlet>
    </main>
    <footer>
      Your sticky footer with a variable height.
    </footer>
  </div>
</mat-sidenav-container>

样式:

/*
 * Actual Sticky Footer Styles
 */
.all-wrap {
  min-height: 100vh;
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}


/*
 * Make the Component injected by Router Outlet full height:
 */
main {
  display: flex;
  flex-direction: column;
  > *:not(router-outlet) {
    flex: 1;
    display: block;
  }
}

您可以在博客文章是我对在这里找到的解决方案不满意而写的.还有一个演示.

You can find a more detailed description in a Blogpost that I wrote since I was unhappy with the solution I found here. There is also a demo.

这篇关于Angular 2材质中的粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！