Question

我正在使用AngularJs Material sidenav构建一个站点。我希望md-sidenav和md-content都为1页，而当其中一个元素的内容比另一个元素的高度更高时，不会出现滚动条。如何做到这一点？这是HTML：

<div class="content" layout="column" style="height: 100%;">
    <section layout="row" flex>
    <md-sidenav
        class="md-sidenav-left"
        md-component-id="left"
        md-is-locked-open="$mdMedia('gt-md')"
        md-whiteframe="4">

        <md-toolbar class="md-theme-indigo">
            <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>
        <md-content layout-padding ng-controller="LeftCtrl">
            <p hide show-gt-md>
                <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
            </p>
        </md-content>
    </md-sidenav>


    <md-content flex layout-padding style="overflow: unset;">

    <div layout="column" layout-align="top center" style="height: 100%;">
        <p>The left sidenav will 'lock open' on a medium (>=960px wide) device.</p>

        <div>
            <md-button ng-click="toggleLeft()"
                class="md-primary" hide-gt-md>
                Toggle left
            </md-button>
        </div>
    </div>

    <div flex></div>
    </md-content>
    </section>
</div> <!-- end .content -->

Answer 1

您可以使用position属性。

sidenav > md-sidenav, sidenav > md-backdrop {
    position: fixed !important;
}

AngularJS材质-禁用md-sidenav和md-content的滚动

1 个答案: