css - angular 2 material 如何将 md slide nav 的高度设置为 100%(整个屏幕)？

Question

我正在使用 "@angular2-material/sidenav": "2.0.0-alpha.6-2", 我有引导菜单，我想在移动设备中切换到 md-slidenav所以我能够在小于 768 像素的屏幕中隐藏我的 Bootstrap 菜单并显示我的 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>

我还尝试将全屏指令添加到 md-slide-layout 标签，但它也没有用

Answer 1

您可以使用视口(viewport)单位 (vh) 而不是百分比。由于 1 vh 等于浏览器窗口高度的 1%，因此 100 vh 与写入 100% 相同。最重要的是:它适用于 Angular 2(我刚刚遇到了同样的问题)。