无法将角材料 md-sidenav 设为 100% 高度 [英] Can't get angular-material md-sidenav to be 100% height
问题描述
我正在使用带有 sidenav 的 angular2-material 制作一个新的 angular2 应用程序.而且我这辈子都无法让 sidenav 达到 100% 的高度.我试图让一个菜单滑出,占据屏幕的整个高度.无论用户滚动到哪里,我都希望它以相同的方式打开.
这是我的模板:
<md-sidenav #start mode="over"><a [routerLink]="['/login']" class="btn btn-primary">登录</a><br></md-sidenav><md-toolbar color="primary"><button md-button (click)="start.toggle()">打开侧边抽屉</button><span>法术书</span><span class="demo-fill-remaining"></span></md-工具栏><div class="demo-sidenav-content"><路由器插座></路由器插座>
</md-sidenav-layout>
这是我的 CSS:
.demo-sidenav-layout {//边框:3px纯黑色;最小高度:100%;MD-sidenav {填充:10px;背景:格斯伯勒;最小高度:100%;}}.demo-sidenav-content {填充:15px;最小高度:100%;}.演示工具栏{填充:6px;.demo-toolbar-icon {填充:0 14px 0 14px;}.demo-fill-remaining {弹性:1 1 自动;}}
我也将 html
设置为 height:100%
并将 body
设置为 min-height:100%
>
使用全屏
<md-sidenav #start mode="over"><a [routerLink]="['/login']" class="btn btn-primary">登录</a><br></md-sidenav><md-toolbar color="primary"><button md-button (click)="start.toggle()">打开侧边抽屉</button><span>法术书</span><span class="demo-fill-remaining"></span></md-工具栏><div class="demo-sidenav-content"><路由器插座></路由器插座>
</md-sidenav-layout>
I'm making a new angular2 application using angular2-material with a sidenav. And I can't for the life of me get that sidenav to have a height of 100%. I'm trying to get a menu to slide out that takes up the whole height of the screen. And I want it to open the same way no matter where the user has scrolled.
Here is my template:
<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>
And here is my 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;
}
}
I also have html
set to height:100%
and body
set to min-height:100%
Use fullscreen
<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>
这篇关于无法将角材料 md-sidenav 设为 100% 高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!