可以在md-sidenav-layout内将md-toolbar固定在顶部吗? [英] Can md-toolbar be fixed top when inside md-sidenav-layout?
问题描述
我真的在这里挣扎.我们正在使用md-sidenav-layout,发现不可能提出一种将md-toolbar修复到页面顶部的方法:
Am really struggling here. We're using md-sidenav-layout and finding it impossible to come up with a way to fix the md-toolbar to the top of the page:
|--------------------------------|
| <------ md-toolbar -------> | <- fix this so content scrolls under
|--------------------------------|
| ^|
| scrollable |
| v|
----------------------------------
由于md-sidenav-layout似乎可以自行修复,因此添加了
Because of the way md-sidenav-layout seems to fix itself, adding
style: fixed
到md-toolbar不能解决它-实际上似乎什么都没有!
to the md-toolbar doesn't fix it - in fact nothing seems to!
任何帮助表示赞赏.
推荐答案
对于其他为此苦苦挣扎的人来说,之所以困难是因为md-sidenav-layout和md-sidenav-content都指定了
For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify
transform: translate3d(0,0,0)
这将重置子元素的坐标系.这是使用transform3d的已知问题"或考虑因素.我们想到的另一种方法是将md-toolbar放置在md-sidenav-layout外部,如下所示:
What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:
<div style="position: fixed; width: 100%">
<md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>
执行上述操作可获得具有全屏布局的固定md-toolbar所需的效果.
Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.
有关固定/translate3d问题的更多信息,请参见此SO:'transform3d'not担任职务:固定子女
See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children
这篇关于可以在md-sidenav-layout内将md-toolbar固定在顶部吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!