使用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 Site（您要求提供相同功能的站点）的源代码