[英]How can I make mat-sidenav take up entire vertical space underneath mat-toolbar?
I'm trying to get the following angular-material layout working.我正在尝试使以下 angular-material 布局正常工作。 I have a
mat-toolbar
at the top, and mat-sidenav
on the bottom.我在顶部有一个
mat-toolbar
,在底部有一个 mat mat-sidenav
。 No matter what I try, I can't get the mat-sidenav-container
to take up the whole page height.无论我尝试什么,我都无法让
mat-sidenav-container
占据整个页面高度。 This is my attempt using grid layout.这是我使用网格布局的尝试。 It looks like it should work, but it doesn't.
看起来它应该工作,但它没有。 It seems like the
mat-sidenav
automatically shrinks to the height of element inside mat-sidenav-content
.似乎
mat-sidenav
自动缩小到mat-sidenav-content
内元素的高度。
Here's my html:这是我的 html:
<div class="main-div">
<app-header class="app-header"></app-header>
<app-sidenav class="app-sidenav"></app-sidenav>
</div>
Here's my css:这是我的 css:
.main-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.app-header {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.app-sidenav {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
Try adding this尝试添加这个
.main-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
height: 100vh;
}
.mat-sidenav-container {
height: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.