javascript - Angular Material Sidenav 不覆盖 Scroll 上的全屏

Question

在滚动时，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>

Answer 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