角2物料容器固定不起作用 [英] angular 2 material container fixed not working
问题描述
我对CSS和angular 2材质有问题.任何固定定位的元素的行为都不像是固定在md-sidenav-container内部.如果它不在容器内部，则可以正常工作.
i have problem with css and angular 2 material. Any fixed positioned element doesn't behave like it is fixed inside md-sidenav-container.If it is not inside container, it works perfectly.Here is a link for that problem;
只需将md-toolbar复制并粘贴到内部容器中，您就会发现区别.
Just copy and paste md-toolbar to inside container you will see difference.
https://embed.plnkr.co/5m3vwp7q0Do9uJKchvqD/
如果任何html元素(包括材料的)在容器固定的外部都可以正常工作，但是如果它在容器内部，则它将失败并停留在(有时是dissappers)它所在的位置(我相信它的行为类似于position:relative)
if any html element ( including material's ) is outside of container fixed works fine but if it is inside container, it fails and stays ( sometimes dissappers) where it is ( i believe it is behaving like position: relative )
我在这里遗漏了什么东西吗，或者是错误还是其他东西?
Am i missing something here or is it a bug or something?
谢谢
推荐答案
我无法确定这是bug还是预期的行为，但是几个月前我遇到了同样的问题.我发现的解决方案是在以下标签上设置css属性height: 100%(假设您的sidenav是您的根级别):html，body，main.
I can't tell if it is a bug or an expected behaviour, but I faced the same problem a few months ago. The solution I found was to set the css property height: 100% on the following tags (assuming your sidenav is your root level) : html, body, main.
您需要在<md-sidenav-container>标记中放入每个要修复的元素，它应该可以工作.
You need to put inside the <md-sidenav-container> tag every element you want to be fixed, and it should work.
我本来想编辑您的插件，但是由于某些原因，systemJS似乎产生了一个奇怪的DOM(有多个<html>，<body>等标记).您需要在<md-sidenav-container>
I would have liked to edit your plunker but, for some reasons, systemJS seems to produce a weird DOM (there are more than one <html>, <body>, etc tags). You will need to set height: 100% on every parent tag of your <md-sidenav-container>
编辑
好像我忘了提到<md-sidenav-container>一样也需要获得height: 100%.关于双滚动条，尝试在<md-sidenav-container>上设置overflow-y: auto.
Looks like I forgot to mention <md-sidenav-container> needs to get height: 100% too. About your double scrollbar, try to set overflow-y: auto on <md-sidenav-container>.
但是由于systemJS的特定DOM，它可能无法解决您的问题.如果您不是特别需要它，我建议您转储它并尝试一个没有systemJS的项目.如果您这样做，恐怕无法为您提供进一步的帮助.
However it may not solve your problem, due to the particular DOM of systemJS. If you don't especially need it, I would suggest you to dump it and try a project without systemJS. If you do, I'm afraid I wont be able to help you further.
这篇关于角2物料容器固定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
