css - 将 mat-table 设置为使用带有滚动条的屏幕上的剩余空间

Question

我有一个由这种垂直结构组成的应用程序:导航栏、搜索部分和包含结果的表格。这些树元素中的每一个都在不使用固定大小的情况下占用其所需的空间。此外，搜索部分有隐藏的子部分，因此它的大小可以随时间变化。

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

如果我设置

overflow: auto

在全局 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