2017-02-03 66 views
0

我有问题与CSS和角2材料。任何固定定位元素的行为都不像md-sidenav-container中固定的那样。如果它不在容器内部,它可以很好地工作。下面是该问题的链接;角2材料容器固定不工作

只需将md-toolbar复制并粘贴到内部容器中即可看到区别。

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

如果任何HTML元素(包括材料的)是容器固定作品以外细,但如果它是内部容器,它失败和停留(有时dissappers)其中它是(ⅰ相信它的行为就像位置:亲戚)

我在这里错过了什么,或者它是一个错误或什么?

感谢

回答

0

我不能告诉,如果它是一个错误或预期的行为,但我在几个月前面临同样的问题。我找到的解决方案是在以下标记上设置css属性height: 100%(假设您的sidenav是您的根级别):html,body,main

你需要在<md-sidenav-container>标签里面加入你想修复的每个元素,它应该可以工作。我想要编辑你的plunker,但由于某些原因,systemJS似乎产生了一个怪异的DOM(有不止一个<html><body>等标签)。您将需要设置height: 100%<md-sidenav-container>

编辑的每一个父标签

貌似我忘了提<md-sidenav-container>需要得到height: 100%了。关于您的双滚动条,请尝试在<md-sidenav-container>上设置overflow-y: auto

但是由于systemJS的特定DOM,它可能无法解决您的问题。如果你不特别需要它,我会建议你把它dump掉,然后尝试一个没有systemJS的项目。如果你这样做,恐怕我无法进一步帮助你。

+0

我看到了我试过的解决方案,但我无法解决我的问题。我再次尝试与父节点,但仍然没有改变,不幸的是事情变得有点不好。我的页面中有2个滚动条,我不知道如何。 http://imagizer.imageshack.us/a/img922/2158/fLAE9C.png 我相信容器添加类似的I帧或类似的东西在我不知道的网页页面。感谢您的回复btw P.S:它不是这样工作 – 0m3rF

+0

不幸的是,我的代理不允许我加载你的屏幕截图。不过,当我第一次处理这个问题时,我经历了类似的事情。 我可以通过看你的plunker说,是systemJS确实创建嵌套的iframe。我不知道这是否需要,也不是一个好习惯,但我可以说这是我的“修复”不适合你的原因。 看看我的编辑另一个尝试,它mays工作:) – Mozgor

+0

我试过了,然后再说你的想法。我也试过最小高度:100%,但它没有解决我的问题。双滚动条出现时,我让容器的高度100%和溢出 - Y:自动没有工作。我在其他地方发现了这个例子,我没有真正写下它,只是改变了一点。说实话,我不知道任何其他方式来加载除systemjs之外的角度模块。它带有角度2的模板。 http://imgur.com/Ty9vY6B这里是另一个链接相同的SS。它只是显示双滚动条和我的问题。如果你知道任何方式来加载角模块,我会很高兴听到它 – 0m3rF