设置 mat-table 以使用滚动条在屏幕上的剩余空间

Question

我有一个由这种垂直结构组成的应用程序：导航栏、搜索部分和带有结果的表格。这些树元素中的每一个都占用了所需的空间，而无需使用固定大小。更多的搜索部分有隐藏的子部分，所以它的大小可以随着时间的推移而改变。

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

如果我设置

溢出：自动

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

如何强制表格使用屏幕上的剩余空间并在需要时显示滚动条？

Answer 1

您可以将 CSS 与 Flexbox 结合使用，通过在导航栏、搜索和表格部分适当地设置flex-grow和flex-shrink属性，使表格填满剩余的屏幕空间。然后使用绝对定位的 div withoverflow: auto来包裹你的桌子。

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以将表格标题固定在滚动条上：

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

Stackblitz 演示在这里：https ://stackblitz.com/edit/angular-ykwfsy