web-dev-qa-db-ja.com

角材のmd-sidenavを100％の高さにすることはできません

サイドナブ付きのangle2マテリアルを使用して、新しいangular2アプリケーションを作成しています。そして、そのサイドナブの身長を100％にすることは私の人生にとって不可能です。画面の高さ全体を占めるメニューをスライドさせて取得しようとしています。そして、ユーザーがどこにスクロールしても同じ方法で開くようにします。

これが私のテンプレートです：

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start mode="over">

    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>
    <md-toolbar color="primary">

      <button md-button (click)="start.toggle()">Open Side Drawer</button>
      <span>Spellbook</span>

      <span class="demo-fill-remaining">

      </span>

    </md-toolbar>
  <div class="demo-sidenav-content">

    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

そして、これが私のCSSです。

.demo-sidenav-layout {
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}

htmlをheight:100%に設定し、bodyをmin-height:100%に設定しました

cssangularangular-material
39
Alex Kibler

fullscreenを使用します

<md-sidenav-layout fullscreen>

  <md-sidenav #start mode="over">
    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-button (click)="start.toggle()">Open Side Drawer</button>
    <span>Spellbook</span>
    <span class="demo-fill-remaining"></span>
  </md-toolbar>

  <div class="demo-sidenav-content">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>
55
user6508767

Issue：Angular Material 2-フルスクリーンでレンダリングしない のコメントによると、フルスクリーン属性は削除されます...

代わりにこれを試してください：

mat-sidenav-container {
   position: fixed;
   height: 100%;
   min-height: 100%;
   width: 100%;
   min-width: 100%;
}
43
Ricardo Yanez

Material.angularの最新バージョンでは、mat-sidenavのプロパティfixedInViewportを使用できます。

下記参照。

<mat-sidenav #start mode="over" fixedInViewport="true"> ... </mat-sidenav>
9
Kumar
  .demo-sidenav-layout {
      position:fixed;
      //border: 3px solid black;
      min-height:100vh;
      md-sidenav {
        padding: 10px;
        background: gainsboro;
        min-height: 100%;
      }
    }

100％の代わりに高さ100vhを作成します....幅= 100％にすることはできますが、高さを一度に100％にすることはできませんが、通常は無限にスクロールできます。つかいます

position:absolute;

そして使用する

height : 100%;
3
Sithija Piyuman Thewa Hettige

position:fixed sidenav自体で、まさに私が望んでいたものを与えてくれました。

.demo-sidenav-layout {
  position:fixed;
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}
1
Alex Kibler

mad-sidenav-contentのmin-heightを100vhに設定することもできます。

<mat-sidenav-content class="sidenav__content--height"> .... </mat-sidenav-content>

どこ：

.sidenav__content--height{
  min-height: 100vh;
}
0
taylorswiftfan