相关疑难解决方法(0)

我在我的网页中有以下HTML,我希望将侧边栏固定在左侧.它在Chrome中工作正常,但Firfox没有将侧边栏显示为固定:

<div id="sidebar">
    <!-- Logo -->
        <div >
            <h1>Heading</h1>
        </div>
            <!-- Nav -->
                <nav id="nav">
                    <ul>
                        <li><a href="#target1" >About</a></li>
                        <li><a href="#target2" >Works</a></li>
                        <li><a href="#target3" >Our Team</a></li>
                        <li><a href="#target4" >Contact</a></li>

                    </ul>
                </nav>

</div>

上面代码的CSS是:

#sidebar
{
    position: fixed;
    top: 0;
    padding: 3em 1.35em 1em 1.15em;
    height: 100%;
    width: 12em; 
    background: #364050 ;
    box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}

请给我一些解决方案,以便侧边栏在Firefox中保持固定.

DOWNVOTERS请先评论.

我有一个使用的角度2材质的应用程序<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:位置和该SO张贴有关position: fixed,似乎如果父母使用它不会工作transform.而且我很确定md-sidenav-layout侧面切换时转换的用途是什么.我position: fixed; top: 0在一个简单的静态页面上测试了它,它工作正常.

我可以尝试将工具栏从上下文中取出md-sidenav-layout,但它是处理动画和过渡以使工具栏和sidenav在切换sidenav时保持一致的.

我的CSS-fu并不强大.也许我错过了什么.有没有关于如何解决这个问题的任何机构？只要我获得了预期的效果,欢迎任何解决方法.

这是Plunker.