1

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

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

如果我设置

溢出：自动

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

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

4

1 回答 1

7

您可以将 CSS 与 Flexbox 结合使用，通过在导航栏、搜索和表格部分中适当地设置flex-grow和属性来使表格填满剩余的屏幕空间。flex-shrink然后使用绝对定位的 divoverflow: 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

于 2018-12-09T03:52:48.603 回答