在Angular Material中创建一个嵌套的可滚​​动内容区域（带有toolbar和sidenav）

Question

我只是想让我的主视图页面滚动，但如果不将div的高度设置为特定的数量，即使使用md-content，也无法实现此目的。

我用来放置所有视图的容器div使用ui-view嵌套两层。

根状态如下：

<md-toolbar layout="row" layout-align="center center">
    <h3>Site Title</h3>
</md-toolbar>

<div layout="column" flex id="content" ui-view></div>

然后下一个视图用于显示所有子状态/视图中存在的工具栏和sidenav：

<div layout="row" flex>
    <md-sidenav>

        <md-list layout="column" flex>
            //SCROLLABLE SIDENAV WORKS PERFECTLY
            //NAVIGATION ITEMS LIVE HERE
        </md-list>
    </md-sidenav>

<div layout="column" flex>
    <md-toolbar layout="row" layout-align="center center">
        <h2>Subheading</h2>
    </md-toolbar>

    <div class="md-padding" ui-view flex>
        //THIS IS WHERE THE CHILD VIEWS GO
    </div>
</div>

我已尝试在最终的ui-view和div中添加一个类但只能实现具有特定高度的滚动（显然不能跨设备工作）并通过更改导致问题的位置鉴于它上方有两个工具栏（以及浮在上面的FAB＆＃39;）

md-content无法正常工作，我不确定为什么这么简单的事情在这种情况下如此困难。我正在重新设计我的webapp，它一直使用Bootstrap所以请原谅我缺乏CSS技能，因为它已经在我收到它时已经布局了。

感谢您的帮助。

Answer 1

包含以下代码的Parent类必须md-content，并且只要您使用ui-view，就可以使用<md-toolbar layout="row" layout-align="center center"> <h3>Site Title</h3> </md-toolbar> <md-content layout="column" flex id="content" ui-view> </md-content> 。

md-content

同样，您应该在以下子元素中使用{{1}}来获得所需的结果。

这是Codepen。