css - 角度材料 6 sidenav 使用 100% 页面高度/垫表滚动

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 或主体的高度扩展到 100%

Answer 1

采用

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

我在你的 stackblitz 中尝试了 id 并且工作了