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

Question

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

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

如果我设置

溢出：自动

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

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

Answer 1

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

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