设置 mat-table 以使用屏幕上剩余的 space 和滚动条

Question

我有一个由垂直 structure:a 导航栏、搜索部分和 table 结果组成的应用程序。这些树元素中的每一个都占据了它需要的 space 而不使用固定大小。搜索部分还有隐藏的子部分，因此它的大小可以随时间变化。

我想做的是：我希望这三个部分独立调整它们的高度以占据所有 space 可用空间。但是由于我可以在 table 上获得很多结果，因此最终需要有一个垂直滚动条。所以我唯一想看到的滚动条是 table 的结果部分。

如果我设置

overflow: auto

在全局 CSS 如果 table 有太多结果，我会看到一个全局滚动条。

如何强制 table 使用屏幕上剩余的 space 并在需要时显示滚动条？

Answer 1

您可以将 CSS 与 Flexbox 一起使用，通过适当地设置 flex-grow 和 flex-shrink 属性，使 table 填满剩余的屏幕 space您的导航栏、搜索和 table 部分。然后使用绝对定位的 div 和 overflow: auto 来包装你的 table.

HTML:

<div id="container">
    <div id="navbar"></div>
    <div id="search"></div>
    <div id="table">
        <div id="table-container">
            <!-- Table goes here -->
        </div>
    </div>
</div>

CSS:

#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

#navbar {
    flex: 0 0 auto;
    height: 70px;
    width: 100%;
}

#search {
    flex: 0 0 auto;
    height: 50px;
    width: 100%;
}

#table {
    flex: 1 1 auto;
    width: 100%;
    position: relative;
}

#table-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

#table-container table {
    width: 100%;
}

对于奖励积分，添加 position: sticky 将 table header 固定在滚动条上：

.mat-header-row th {
    position: sticky;
    top: 0;
    background-color: white;
}

此处为 Stackblitz 演示：https://stackblitz.com/edit/angular-ykwfsy

设置 mat-table 以使用屏幕上剩余的 space 和滚动条

Set mat-table to use remaining space on screen with scrollbar

css

angular-material

angular7

mat-table