CSS 无法将角材料 md-sidenav 设为 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37334853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get angular-material md-sidenav to be 100% height
提问by Alex Kibler
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.
我正在使用带有 sidenav 的 angular2-material 制作一个新的 angular2 应用程序。而且我这辈子都无法让 sidenav 达到 100% 的高度。我试图让一个菜单滑出，占据屏幕的整个高度。无论用户滚动到哪里，我都希望它以相同的方式打开。
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:
这是我的 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 htmlset to height:100%and bodyset to min-height:100%
我也html设置为height:100%并body设置为min-height:100%
回答by user6508767
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>
回答by Ricardo Yanez
Acording to a comment on Issue : Angular Material 2 - not rendering in full screenthe fullscreen attribute will be removed...
根据对问题的评论：Angular Material 2 - 未全屏渲染，全屏属性将被删除...
Try this instead:
试试这个：
mat-sidenav-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
回答by Kumar
In the latest version of material.angular you can use the property fixedInViewport on mat-sidenav.
在 material.angular 的最新版本中，您可以在 mat-sidenav 上使用 fixedInViewport 属性。
See below.
见下文。
<mat-sidenav #start mode="over" fixedInViewport="true"> ... </mat-sidenav>
回答by Sithija Piyuman Thewa Hettige
.demo-sidenav-layout {
position:fixed;
//border: 3px solid black;
min-height:100vh;
md-sidenav {
padding: 10px;
background: gainsboro;
min-height: 100%;
}
}
make height 100vh instead of 100%....eventhough you can make width = 100% you cannot simply make height 100% at once ,because usually you can scroll down to infinity. use
使高度为 100vh 而不是 100%....即使您可以使宽度 = 100%，您也不能简单地一次将高度设为 100%，因为通常您可以向下滚动到无穷大。用
position:absolute;
and then use
然后使用
height : 100%;
回答by Alex Kibler
I ended up setting position:fixedon the sidenav itself, which gave me exactly what I wanted.
我最终设置position:fixed了 sidenav 本身，这正是我想要的。
.demo-sidenav-layout {
position:fixed;
//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;
}
}
回答by taylorswiftfan
You can also set mad-sidenav-content's min-heightto be 100vhlike so:
您还可以将mad-sidenav-content'smin-height设置为100vh这样：
<mat-sidenav-content class="sidenav__content--height"> .... </mat-sidenav-content>
<mat-sidenav-content class="sidenav__content--height"> .... </mat-sidenav-content>
Where:
在哪里：
.sidenav__content--height{
min-height: 100vh;
}
