angular 2 material 我如何将 md 幻灯片导航的高度设置为 100%（全屏）？答案

【问题标题】：angular 2 material how i can set md slide nav's height to 100% (whole screen)?angular 2 material 我如何将 md 幻灯片导航的高度设置为 100%（全屏）？
【发布时间】：2016-09-20 15:10:32
【问题描述】：

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

【问题讨论】：

如果你想使用浏览器窗口，你可以使用视口点..视口高度 VH 和视口宽度 VW..关于视口点最好的事情是响应式的..它适应每个屏幕..您不需要编写媒体查询..并且查看端口也可以在其他 HTML 元素中使用..如果您想让您的字体大小响应所有屏幕尺寸而不编写媒体查询？将视口点设置为字体大小.. 使用视口，您可以做很多很棒的事情..

标签： css angular2-material

【解决方案1】：

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

【讨论】：