12

我正在使用Angular w/ Angular Material和Flex 布局

我正在尝试为与此站点完全相同的 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%;
}

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

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

4

4 回答 4

5

您可以在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 的源代码（你问过相同功能的那个）

于 2017-10-24T07:09:22.017 回答
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

于 2017-10-25T03:30:17.497 回答
0

这就是你要找的 

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>

于 2017-10-24T09:10:37.120 回答
0

使用最新的 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>
于 2019-01-15T14:14:53.733 回答