sidenav 在 angularjs 材料设计中无法正确显示答案

【问题标题】：sidenav not displaying properly in angularjs material designsidenav 在 angularjs 材料设计中无法正确显示
【发布时间】：2016-03-01 15:09:31
【问题描述】：

这是我的代码。

<body>
    <div  ng-controller="MainCtrl as mc">

        <md-content>
            <md-toolbar md-scroll-shrink>
               <div class="md-toolbar-tools">
                    <span flex="5"></span>

                    <md-button ui-sref="Home">
                        example.com
                    </md-button>


                    <span flex="20"></span>


                    <span>something something</span>
                    <span flex="20"></span>


                    <md-button ng-show="!login" aria-label="Settings" ui-sref="Login">
                        Login / Register
                    </md-button>

                    <md-button ng-show="login" class="md-icon-button" aria-label="Settings" ng-click="openRightMenu()">
                        <md-icon class="material-icons">menu</md-icon>
                    </md-button>

                    <md-sidenav md-component-id="right" class="md-sidenav-right">
                        <md-button href="http://google.com">Google</md-button>
                    </md-sidenav>

                </div>
            </md-toolbar>
        </md-content>

        <div ui-view></div>
    </div>
</body>

当我点击按钮打开右侧导航时，它会打开，但高度与工具栏相同。

如何显示标准尺寸的sidenav？

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

将 md-sidenav 放在 md-content 之外

<div  ng-controller="MainCtrl as mc">

    <md-content>            
    </md-content>

    <md-sidenav md-component-id="right" class="md-sidenav-right">
        <md-button href="http://google.com">Google</md-button>
    </md-sidenav>

    <div ui-view></div>

如果它在 md-toolbar 内，它将占用工具栏高度

【讨论】：