angular 2 materialどのようにmdスライドナビの高さを100％（画面全体）に設定できますか？

Question

"@ angular2-material/sidenav"： "2.0.0-alpha.6-2"、と私はモバイルでmd-slidenavに切り替えるブートストラップメニューを持っています。私のブートストラップメニューは768 px以下の画面で表示され、md-slidenavが表示されますが、メニューの高さを継承して画面全体に表示されません。

<nav id="main-menu" class="navbar navbar-default switch" role="navigation"> 
<div class="container-fluid"> 
<div class="navbar-header"> 

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
    aria-expanded="true"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar top-bar"></span> 
    <span class="icon-bar middle-bar"></span> 
    <span class="icon-bar bottom-bar"></span> 
    </button> 
    <a class="navbar-brand" [routerLink]="['/home']"> 
    <img class="logo" src="{{imgPath}}" /> 
    </a> 

</div> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav pull-right pull oa-nav"> 
    <li> 
     <a href="http://www.google.com"> 
     <span class="list-land"> 
      link 
     </span> 
     </a> 
    </li> 
    <li> 
     <a [routerLink]="['/link']">link</a> 
    </li> 
    <li> 
     <a [routerLink]="['/user/sign-in']">Login</a> 
    </li> 
    <li> 
     <a type="button" class="btn btn-primary join-now" style=" margin-top: 0px; margin-left: 8px; " [routerLink]="['/user/signup']">link</a> 
    </li> 
    <li> 
     <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">About Us</a> 
     <ul class="dropdown-menu dropdown-menu-right"> 
     <li> 
      <a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/welcome']">Welcome Letter</a> 
     </li> 
     <li> 
      <a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/news']">News</a> 
     </li> 
     <li> 
      <a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/help']">Help</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
    </div> 
    </div> 
</nav> 

 <md-sidenav-layout > 
<div class="left-menu"> 
    <button class="hamburger" (click)="left.toggle()"> 
    <span></span> 
    <span></span> 
    <span></span> 
</button> 
</div> 

<md-sidenav class="md-sidenav tab-toggle" #left (open)="mybutton.focus()" mode="over" layout-padding> 
    <button #mybutton (click)="left.close()" class="btn" style="right:20px;top:10px; 
      position:absolute; 
      padding: 0px 4px; 
      border-radius: 10px; 
      border-color:#fff;"> 
    <i class="fa fa-times fa-2x" style="color:#009688;" aria-hidden="true"></i> 
    </button> 
    <div> 
    <ul class="list-item"> 
     <li> 
      <a [routerLink]="['/profile/my-excursions']">My Trips</a> 
     </li> 
     <li> 
      <a [routerLink]="['/profile']">Profile</a> 
     </li> 
     <li> 
      <a [routerLink]="['/profile/membership']">Membership</a> 
     </li> 
     <li *ngIf="userService.isMember"> 
      <a [routerLink]="['/profile/background-check']">Background Check</a> 
     </li> 
     <li> 
      <a [routerLink]="['/user/change-password']">Password</a> 
     </li> 
     <li> 
      <a (click)="logOut()">Logout</a> 
     </li> 
    </ul> </div> 
</md-sidenav> 
</md-sidenav-layout> 

もあなたが代わりにパーセントのビューポート単位（VH）を使用することができ、私はMD-スライドレイアウトタグにフルスクリーンディレクティブを追加しようとしましたが、それは仕事didntのいずれか

Answer 1

。 1 vhはブラウザのウィンドウの高さの1％に等しいので、100 vhは100％と同じです。そして、最も重要なこと：Angular 2で動作します（私はちょうど同じ問題を抱えていました）。