angular material 6 sidenav 使用 100% 页面高度/mat-table 滚动

Question

嗨，我现在正在与 css 战斗数小时 - 我希望你能帮助我：

我尝试将我的高度设置为固定的 100%。如果子 mat-table 有更多数据行，它也应该调整大小并且不超过 100% 年龄大小。（mat-table 现在支持滚动和粘性页眉和页脚行。这就是为什么我喜欢给我的 SPA 一个新设计）

这是一个示例：https://stackblitz.com/edit/ng-fullpage-scrolltable 但这有一个固定设置 .mat-table { height: 400px;}（如果显示超过 5 个项目，mat-table 会很好地滚动）

我怎样才能使这个高度（或者更好的是整个 mat-sidenav-container 或 body 的高度扩展到 100%

Answer 1

使用

.mat-table {
  height: calc( 100vh - 250px);
  overflow: auto; 
  width: 100%;
}

我在你的 stackblitz 中尝试了 id 并成功了

angular material 6 sidenav use 100% page height / mat-table scroll