Question

我正在使用Angular w / 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%;
}

我注意到没有页面上的工具栏，一切都很完美。所以我添加了一个填充底部：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网站的源代码（您提出的相同功能）

Answer 2

您可以尝试使用此代码

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

Answer 3

这就是你要找的东西

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
}

mat-sidenav-container {
  width: 100%;
  height: calc(100% - 64px);
}

＆＃13;

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

＆＃13;

Answer 4

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

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

4 个答案: