我正在使用带有 sidenav 的 angular2-material 制作一个新的 angular2 应用程序。而且我这辈子都无法让 sidenav 的高度达到 100%。我正在尝试让一个菜单滑出,占据整个屏幕的高度。我希望无论用户滚动到哪里,它都以相同的方式打开。
这是我的模板:
<md-sidenav-layout class="demo-sidenav-layout">
<md-sidenav #start mode="over">
<a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
<br>
</md-sidenav>
<md-toolbar color="primary">
<button md-button (click)="start.toggle()">Open Side Drawer</button>
<span>Spellbook</span>
<span class="demo-fill-remaining">
</span>
</md-toolbar>
<div class="demo-sidenav-content">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
这是我的 CSS:
.demo-sidenav-layout {
//border: 3px solid black;
min-height:100%;
md-sidenav {
padding: 10px;
background: gainsboro;
min-height: 100%;
}
}
.demo-sidenav-content {
padding: 15px;
min-height:100%;
}
.demo-toolbar {
padding: 6px;
.demo-toolbar-icon {
padding: 0 14px 0 14px;
}
.demo-fill-remaining {
flex: 1 1 auto;
}
}
我还将 html
设置为 height:100%
并将 body
设置为 min-height:100%
最佳答案
使用全屏
<md-sidenav-layout fullscreen>
<md-sidenav #start mode="over">
<a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
<br>
</md-sidenav>
<md-toolbar color="primary">
<button md-button (click)="start.toggle()">Open Side Drawer</button>
<span>Spellbook</span>
<span class="demo-fill-remaining"></span>
</md-toolbar>
<div class="demo-sidenav-content">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
关于css - 无法将 Angular Material md-sidenav 设置为 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37334853/