html - 如何像 material.angular.io 网站那样实现可滚动的导航容器？

Question

https://material.angular.io/components

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

基本上他们有一个 md-toolbar工具栏下方是 md-sidenav-container

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

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

这是我暂时的做法

calcHeight() {
    var toolbarHeight = document.getElementById('main-toolbar').clientHeight;
    this.mainDivMaxHeight = (window.innerHeight - toolbarHeight).toString() + "px";
}
ngAfterViewInit() {
    window.onresize = () => {
        this.calcHeight();
    };
}

Answer 1

您必须设置容器的高度并允许 overflow-y 为自动。

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

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