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

Question

我正在使用 Angular带 Angular Material和 Flex Layout

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

这是我用来提供我的基本结构的 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%;
}

我注意到如果页面上没有工具栏，一切都可以正常工作。所以然后我添加了一个 padding-bottom: 64px;到 md-sidenav-container，.main-content 类。似乎它针对内容修复了它，但不是 sidenav。 sidenav 滚动条仍然位于浏览器窗口下方。

如果有人能告诉我如何使用 flex 指令，我确实在我的 Angular 应用程序中安装了 flex-layout。否则，纯 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 站点(您要求具有相同功能的站点)的源代码