6

我有一个使用内部的 Angular 2 Material 应用<md-sidenav-layout>程序<md-toolbar>。

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav" opened="true">
    sidenav content
  </md-sidenav>

  <md-toolbar color="primary" class="toolbar">
    toolbar content
  </md-toolbar>
</md-sidenav-layout>

它看起来像这样

在此处输入图像描述

我想要做的是让工具栏贴在顶部，这样当你向下滚动时它就不会移动。这是为了使其与 sidenav 及其标题保持一致。但目前它不起作用。

在此处输入图像描述

我虽然添加position: fixed; top: 0可以解决问题，但它没有

/* Doesn't work */
.toolbar {
  position: fixed;
  top: 0;
}

根据我从MDN 中读到的内容： position和这篇关于的SO 帖子position: fixed，如果父母使用transform. 而且我很确定这md-sidenav-layout就是切换 sidenav 时转换的用途。我已经position: fixed; top: 0在一个简单的静态页面上进行了测试，它工作正常。

我可以尝试将工具栏移出md-sidenav-layout.

在此处输入图像描述

我的 CSS-fu 不强。也许我错过了一些东西。有没有人对如何解决这个问题有任何想法？在这一点上，任何变通方法都是受欢迎的，只要我得到想要的效果。

这是Plunker。

4

1 回答 1

9

您应该将内容滚动放在...内容上。这不仅是一种解决方法，实际上每次我需要这种布局时我都会自己做，因为在你要滚动到的东西里面有滚动条会更自然。例如，如果侧边栏内容太大，它也需要有自己的滚动上下文。

不知道材料团队为什么以这种方式实现它，但在最终版本中，当使用 sidenav 布局时，可能会有一个固定的工具栏成为默认行为（或者至少我希望我们会有一个选项）。

无论如何，我已经更新了你的 plunker 以显示我的意思： http ://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

您基本上禁用了 sidenav 内容的滚动：

/*
 * The /deep/ selector is simply to overcome view encapsulation
 * and be able to select the div.md-sidenav-content generated at runtime
*/
md-sidenav-layout /deep/ .md-sidenav-content {
  overflow: hidden;
}

然后你只需.app-content填充正确的高度并将其溢出设置为自动：

.app-content {
  padding: 20px;
  height: calc(100% - 64px);
  overflow: auto;
}
于 2016-09-25T06:42:07.540 回答