web-dev-qa-db-ja.com

Angular 2マテリアルのスティッキーフッター

私は尋ねる必要がなかったので、私は今約3時間検索して検索していますが、「フッター」変数を下部に保持することができますが、下部に固定されているようにするにはどうすればよいですか？非常に小さいため、ページの半分だけではなく、多くの情報がある場合、ページの下部でロックされず、スクロール中にデータの上に座ってしまいます。

これを含むいくつかの方法を試しました： https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a-sticky-footer.html そして、これに関連するほとんどの質問は私がテストして失敗したか、まったく機能しないようです。

現在のコードは次のとおりです。

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

そしてその <app-content></app-content>はnavbarがフルページsidenavを制御するため、navbar内にあります。

App-navbar全体は次のようになります。

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

フッターは、次のような非常に基本的なコンポーネントです。

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

これまでに適用されたスタイリングのみがこれです。

@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ファイルにあります。

angularflexboxmaterial-designangular-material2
6
Cacoon

Flexboxを使用するアプローチ：

Flexbox=）を使用すると、cleanerソリューションが得られます。また、ページの最初のコンポーネントもカバーしますこれは、要素を適切に配置したり、背景を操作したりするためによく必要です。コードは、マテリアル2の現在のバージョンと一致しています-執筆時点では、これは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;
  }
}

ここで見つけた解決策に不満だったので書いた Blogpost でより詳細な説明を見つけることができます。 デモ もあります。

21
Can

数行のソリューションを次に示します。

app.component.html：

<div fxLayout="column" fxFlexFill>
    <app-header></app-header> // your header
    <div fxFlex>
        <router-outlet></router-outlet> // your content
    </div>
    <app-footer></app-footer> // your footer
</div>

styles.css：

html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

別の代替コンテンツの代わりにフッターを埋めたい場合：

app.component.html：

<div fxLayout="column" style="height: 100%;">
    <app-header></app-header> // your header
    <router-outlet></router-outlet> // your content
    <app-footer fxFlexOffset="auto"></app-footer> // your footer
</div>

styles.css：

html, body {
    height: 100%;
}
1
Curse

答えはここにあります： Angular 2 の一番下のスティッキーフッター

ソリューション

app {
  min-height: 100%;
  width: 100%;
  margin-bottom: -271px;
  display: table;
}

header-main,
router-outlet,
footer{
  display: table-row;
}

header-main {
 height: 60px;
}

router-outlet {
  position: absolute;
}

footer {
  height: 271px;
}
0
Cacoon