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

Posted 2023-03-06

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

【英文标题】：Creating a layout with a fixed header, fixed sidebar, fixed content section using Angular Material / Flex-Layout in Angular

【发布时间】：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。这将使您免于高度不匹配的问题。

你有一个有效的例子吗？我也认为这是错误的容器过度浮动的问题......但我需要现场查看和测试......

【参考方案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 站点的源代码（您曾询问过相同的功能）

【讨论】：

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