Angular Material Sidenav 没有在 Scroll 上覆盖全屏答案

【问题标题】：Angular Material Sidenav Not covering full screen on ScrollAngular Material Sidenav 没有在 Scroll 上覆盖全屏
【发布时间】：2017-05-10 15:47:33
【问题描述】：

在滚动时，Sidenav 不会占据屏幕的 100%，它也在滚动。

<div layout="column">
    <section layout="row" flex>
        <!-- sidenav content -->
        <md-sidenav class="md-sidenav-left"
                    md-component-id="left"
                    md-whiteframe="20"
                    flex>
            <md-content layout-padding></md-content>
        </md-sidenav>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

【问题讨论】：

你能创建一个 jsfiddle/plunkr 解决方案吗？
确保侧导航是position: fixed 和height: 100vh。如果可能，还要创建一个小提琴。

标签： javascript css angularjs angularjs-directive angular-material

【解决方案1】：

只需将md-sidenav 放在div 之外：

<!-- sidenav content -->
<md-sidenav class="md-sidenav-left"
    md-component-id="left"
    md-whiteframe="20"
    flex>
    <md-content layout-padding></md-content>
</md-sidenav>
<div layout="column">
    <section layout="row" flex>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

Codepen Demo

【讨论】：