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

我正在使用w/and

我正在尝试为一个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>

我注意到，如果页面上没有工具栏，一切都可以完美地工作。然后我添加了一个填充底部：64px；到md sidenav容器，.main内容类。它似乎为内容修正了它，但没有为sidenav修正。sidenav滚动条仍然位于浏览器窗口的下方

---

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

您可以在

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

您可以在以下位置查看代码：

---

此外，您还可以在

上找到Angular Material Docs站点（即您要求的具有相同功能的站点）的源代码，这就是您要查找的内容

html，
身体{
宽度：100%；
身高：100%；
}
mat sidenav集装箱{
宽度：100%；
高度：计算（100%-64px）；
}

申请名称
抽屉内容

您可以尝试此代码

html

---

这是Plunker链接：

采用最新的角度材料（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>

申请名称
抽屉内容
主要内容

我建议使用绝对定位的sidenav，并在其内部相对定位一个div。然后溢出滚动/自动相对div。这将避免高度不匹配问题。您有工作示例吗？我也这么认为，这是一个错误的容器溢出的问题。。。但我需要现场查看和测试…此解决方案未按预期工作，工具栏未按预期保持在顶部。此解决方案未达到预期结果。这是所选的解决方案。结果非常接近预期。

<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>

.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;
}

<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>