Question

我将sidenav设置为以这种方式适应屏幕高度的100％：

我的app.component.html：

<md-toolbar>etc</md-tooblar>

<router-outlet></router-outlet>

我的一条路线以这种方式指向sidenav：

admin.component.ts

<md-sidenav-container>
  <md-sidenav #sidenav mode="side" opened="true" class="sidenav">
        My Sidenav
  </md-sidenav>

  <div class="sidenav-content mat-typography">
      <router-outlet></router-outlet>
  </div>
</md-sidenav-container>

admin.component.css：

md-sidenav-container {
   height: 100vh;
}

问题是高度是100％，不包括主应用程序组件的工具栏，并且我的任何页面都有一个滚动条。

我试图将我的md-sidenav-container高度设置为93％（完全适合我的屏幕），但在其他屏幕中，容器错过了距离屏幕底部大约30-50像素（容器不在内）。到达屏幕底部。）

对此有何解决方案？

Answer 1

放

md-sidenav-container {
   height: calc(100vh - hightOfToolbar);
}

应该适用于任何地方，因为您将容器高度调整为屏幕最大高度 - 工具栏的高度。

工具栏下的全高侧窗（跨设备）

1 个答案: