[英]How to pin mat-toolbar and mat-sidenav and only have a scrollbar inside mat-sidenav-content?
[英]How can I make mat-sidenav take up entire vertical space underneath mat-toolbar?
我正在嘗試使以下 angular-material 布局正常工作。 我在頂部有一個mat-toolbar
,在底部有一個 mat mat-sidenav
。 無論我嘗試什么,我都無法讓mat-sidenav-container
占據整個頁面高度。 這是我使用網格布局的嘗試。 看起來它應該工作,但它沒有。 似乎mat-sidenav
自動縮小到mat-sidenav-content
內元素的高度。
這是我的 html:
<div class="main-div">
<app-header class="app-header"></app-header>
<app-sidenav class="app-sidenav"></app-sidenav>
</div>
這是我的 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;
}
嘗試添加這個
.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.