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

【问题标题】：Creating a layout with a fixed header, fixed sidebar, fixed content section using Angular Material / Flex-Layout in Angular在 Angular 中使用 Angular Material / Flex-Layout 创建具有固定标题、固定侧边栏、固定内容部分的布局
【发布时间】：2017-09-19 22:09:09
【问题描述】：

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

我正在尝试为 Web 应用程序创建一个与 this site 完全相同的布局。注意固定的标题，固定的侧边栏，固定的内容痛苦。没有使用浏览器滚动，只有 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%;
}

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

如果有人能告诉我如何使用 flex 指令，我确实在我的 Angular 应用程序中安装了 flex-layout。否则，纯 css 也可以。

【问题讨论】：

我建议使用绝对定位的sidenav，其中的div相对定位。然后溢出滚动/自动相对div。这将使您免于高度不匹配的问题。
你有一个有效的例子吗？我也认为这是错误的容器过度浮动的问题......但我需要现场查看和测试......

标签： css angular flexbox angular-material2 angular-flex-layout

【解决方案1】：

使用最新的 Angular Material (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>

【讨论】：

【解决方案2】：

这就是你要找的

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>

【讨论】：

此解决方案未按预期工作，工具栏未按预期停留在顶部。

【解决方案3】：

你可以试试这个代码

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

【讨论】：

此方案未达到预期效果。

【解决方案4】：

您可以在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 站点的源代码（您曾询问过相同的功能）

【讨论】：

这是选择的解决方案。结果非常接近预期。