Html 如何在material.angular.io网站中实现滚动导航容器？

我似乎无法复制他们的设置

基本上他们有一个md工具栏 工具栏下方是md sidenav容器

他们的sidenav容器的高度似乎是可滚动的，不会超出浏览器/设备的高度

//from my app.component.html or my root component
//the index.html is generated by angular cli and remained untouched
//no additional css applied
<link rel="stylesheet" [href]="sanitizedTheme">

<div class="main-spinner" *ngIf="usrsvc.hasPendingTask">
    <md-spinner color="accent"></md-spinner>
</div>
<md-toolbar id="main-toolbar" color="primary">
    <button md-icon-button (click)="sidenav.toggle()"> <md-icon>menu</md-icon> </button> navaLine
    <span class="spacer"></span>
    <md-select placeholder="Theme" [(ngModel)]="themeModel" (change)="getSanitizedTheme()" >
        <md-option value="deeppurple-amber" >
            DEEPPURPLE-AMBER
        </md-option>
        <md-option value="indigo-pink" >
            INDIGO-PINK
        </md-option>
        <md-option value="pink-bluegrey" >
            PINK-BLUEGRAY
        </md-option>
        <md-option value="purple-green" >
            PURPLE-GREEN
        </md-option>
    </md-select>
</md-toolbar>
<md-sidenav-container>
    <md-sidenav #sidenav>
        <md-list>
            <md-list-item>
                <button md-button (click)="usrsvc.navigate('/'); sidenav.close()"> <md-icon>home</md-icon> Home</button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <div class="main">
        <router-outlet></router-outlet>
    </div>

</md-sidenav-container>

---

您必须设置容器的高度，并允许overflow-y为auto

#nav_wrapper {
  height: 100vh;
  overflow-y: auto;
}

---

此外，如果您希望页面的其余部分高于视口，则可以将其位置固定。

我为给定问题添加了一个通用解决方案，如果您想要更具体的解决方案，请提供指向页面或小提琴的链接。使用类似100vh的链接只会扩展页面。用这个。文档高度变为工具栏高度+导航包装高度。只有当工具栏具有静态高度时，解决方案才有效。您是否有特定的代码，以便我可以看到发生了什么？在“角度”页面上，它们的导航高度设置为100%，这解决了工具栏高度的问题，但其余页面的样式必须确保主体永远不会高于视口，因此右侧的内容组件也必须设置自己的滚动条。当您从导航中选择滑块时，您可以很好地看到它。

#nav_wrapper {
  height: 100vh;
  overflow-y: auto;
}