css - 卡住屏幕顶部的 <div>，让剩余的 <div> 填满屏幕并滚动

Question

我有一个 Angular 7(通俗地说是 Angular 2)应用程序，我需要正确设置样式。

有两个<div>标签。一<div>标签应该呈现在任何需要的垂直空间。永远不应该有滚动条。

第二个<div>需要填充剩余的屏幕，允许用户滚动页面上无法呈现的内容。

期望的结果很像 Gmail，其中工具被锁定在浏览器顶部，收件箱可以滚动。

这是一个StackBlitz我的玩具示例。滚动行为是正确的，但我无法获得第二个 div以填充剩余的屏幕。

这是组件的 HTML 模板:

<div>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <span>Really Important Stuff</span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-form-field appearance="outline">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>

<div class="scroll-container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

这是我应用到模板的 CSS:

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

/* I want the scroll container to fill the remaining screen height */
.scroll-container {
  height: 200px;
  overflow: auto;
}

如果可以避免的话，我不想在我的元素中添加更多的 JS 依赖项。感谢您的帮助。

Answer 1

使用 flexbox 可以通过添加这个 css 来完成

body{
  overflow: hidden;
}

table-filtering-example{
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}

.scroll-container {
  overflow: auto;
}

你可以引用这个有变化的 fork stackblitz https://stackblitz.com/edit/angular-f7dxzo-mqimyr?file=app%2Ftable-filtering-example.css