angular 2材料容器固定不工作答案

【问题标题】：angular 2 material container fixed not workingangular 2材料容器固定不工作
【发布时间】：2017-06-21 09:46:04
【问题描述】：

我对 css 和 angular 2 材质有疑问。任何固定定位元素的行为都不像它在 md-sidenav-container 内固定。如果它不在容器内，它可以正常工作。这是该问题的链接；

只需将 md-toolbar 复制并粘贴到容器内部，您就会看到不同之处。

https://embed.plnkr.co/5m3vwp7q0Do9uJKchvqD/

如果任何 html 元素（包括材料）在容器外固定工作正常，但如果它在容器内，它会失败并停留（有时分散）它所在的位置（我相信它的行为类似于位置：相对）

我在这里遗漏了什么还是错误或什么？

谢谢

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

我不知道这是错误还是预期行为，但几个月前我遇到了同样的问题。我找到的解决方案是在以下标签上设置css属性height: 100%（假设您的sidenav是您的根级别）：html、body、main。

您需要在<md-sidenav-container> 标记内添加您想要修复的每个元素，它应该可以工作。

我本来想编辑你的 plunker，但由于某些原因，systemJS 似乎产生了一个奇怪的 DOM（有多个<html>、<body> 等标签）。您需要在 <md-sidenav-container> 的每个父标签上设置 height: 100%

编辑

看来我忘了提到<md-sidenav-container> 也需要得到height: 100%。关于你的双滚动条，尝试在<md-sidenav-container>上设置overflow-y: auto。

然而由于 systemJS 的特殊 DOM，它可能无法解决您的问题。如果您不是特别需要它，我建议您转储它并尝试没有 systemJS 的项目。如果你这样做，恐怕我无法进一步帮助你。

【讨论】：

我看到了我尝试过的解决方案，但我无法解决我的问题。我用父节点再次尝试了它，但不幸的是仍然没有任何改变，事情变得有点糟糕。我的页面中有 2 个滚动条，我不知道如何。 imagizer.imageshack.us/a/img922/2158/fLAE9C.png 我相信容器会在我不知道的页面中添加类似 iframe 或类似页面的内容。感谢您的回复顺便说一句 P.S：它也不是这样工作的
很遗憾，我的代理不允许我加载您的屏幕截图。但是，当我第一次不得不处理这个问题时，我遇到了类似的事情。通过查看您的 plunker，我可以说 systemJS 确实创建了嵌套的 iframe。我不知道它是否需要也不是一个好的做法，但我可以说这就是我的“修复”对你不起作用的原因。看看我的编辑再试一次，它可能会工作:)
在你说我想之前我试过了。我也试过 min-height : 100% 但它没有解决我的问题。当我将容器的高度设置为 100% 并且溢出-y 时出现双滚动条：自动不起作用。我在 plunker 上的其他地方找到了那个例子，实际上我没有写它，只是稍微改变了一点。老实说，我不知道除了 systemjs 之外的任何其他加载角度模块的方法。它带有 Angular 2 的模板。 imgur.com/Ty9vY6B 这是同一个 ss 的另一个链接。它只显示双滚动条和我的问题。如果您知道任何加载角度模块的方法，我会很高兴听到它
要么这个 plunker 以错误的方式实现 systemJS，要么这个工具制作了奇怪的 DOM。在这两种情况下，如果您想切换，请查看 webpack github.com/AngularClass/angular2-webpack-starter