Angular Material：为什么我的sidenav只有它的父元素那么高？

Question

我有<md-toolbar>指令，其中包含<md-button>。单击该按钮时，我触发<md-sidenav>打开。到目前为止，事情正在发挥作用，但我的<md-sidenav>似乎只占据了<md-toolbar>所包含的高度。

例如，我的<md-toolbar>高64像素。所以目前， <md-sidenav>仅显示64px高。

有没有办法让<md-sidenav>呈现高于一切？我假设我可以设置一个固定的高度或稍后计算一个流体高度，但是现在无论我做什么，<md-sidenav>只占用它的父元素的高度。

我<md-menu>中的所有其他<md-toolbar>元素都正常运行。

这是html模板：

messages.template.html

<md-button class="md-icon-button" ng-click="$ctrl.toggleMessages()" aria-label="Messages">
    <i class="material-icons">message</i>
</md-button>


<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
    <md-toolbar>
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
    </md-toolbar>
    <md-content layout-padding>
        <p>This is the sidenav.</p>
        <md-button ng-click="$ctrl.close()" class="md-primary">
            Close this thing!
        </md-button>
    </md-content>
</md-sidenav>

这是我的组件，它正在侦听点击并触发<md-sidenav>：

messages.component.js

this.toggleMessages = function toggleMessages() {
    $mdSidenav('right').toggle().then(function () {
        //
    });
};

/**
 * Close the messages side nav.
 */
this.close = function () {
    $mdSidenav('right').toggle().then(function () {
        //
    });
}

感谢您的任何建议！