sidenav 在 angularjs material 设计中无法正确显示

Question

这是我的代码。

<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？

Answer 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 内，它将占用工具栏高度

sidenav 在 angularjs material 设计中无法正确显示

sidenav not displaying properly in angularjs material design

angularjs

material-design

angular-material