使用Angular中的Angular Material / Flex-Layout创建具有固定标题，固定侧边栏，固定内容部分的布局

Question

我正在使用Angular w / Angular Material和Flex Layout

我正在尝试为Web应用程序创建一个与此站点完全相同的布局。 注意固定标题，固定侧边栏，固定内容的痛苦。 没有使用浏览器滚动，只有div滚动并完全适合浏览器视口。

这是我用来给我基本结构的html：

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

另外我设置了以下样式：

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

我注意到没有页面上的工具栏，一切都很完美。 所以我添加了一个填充底部：64px; 到md-sidenav-container，.main-content类。 似乎它修复了内容，但不是sidenav。 sidenav滚动条仍然在浏览器窗口下方。

如果有人能告诉我如何使用flex指令，我确实已经安装了flex-layout到我的Angular应用程序。 否则，普通的CSS也没关系。

Answer 1

您可以访问https://angular-material2-issue-dgcx3j.stackblitz.io/查看工作示例。

它与您的要求并不完全相同（它具有额外的功能）。 侧边栏固定在大屏幕上，响应小屏幕隐藏，并显示工具栏上的菜单按钮。

您可以访问https://stackblitz.com/edit/angular-material2-issue-dgcx3j?file=app%2Fapp.component.ts查看代码。

您还可以在https://github.com/angular/material.angular.io找到Angular Material Docs站点的源代码（您要求相同功能的站点）。

Answer 2

您可以尝试此代码

HTML

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" opened="true">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
     <div class="my-content">Main content</div>
  </div>

</md-sidenav-container>

CSS

.example-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}

.my-content{
  height:1200px;
}

和继承人Plunker链接： https ：//plnkr.co/edit/YFGQdVcNnIhMK0GzZ25Z ？ p = preview

Answer 3

这就是你要找的东西

 html, body { width: 100%; height: 100%; } mat-sidenav-container { width: 100%; height: calc(100% - 64px); } 

 <md-toolbar color="primary"> <span>Application Title</span> </md-toolbar> <md-sidenav-container> <md-sidenav mode="side" opened="true">Drawer content</md-sidenav> <div class="my-content"> <router-outlet></router-outlet> </div> </md-sidenav-container> 

Answer 4

使用最新的Angular材料（7.2），它应该开箱即用。

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>