Question

我有一个需要正确设置样式的Angular 7（通常是Angular 2）应用程序。

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

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

所需的结果类似于Gmail，在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;
}

您可以通过更改来引用此分叉的堆栈闪电战 https://stackblitz.com/edit/angular-f7dxzo-mqimyr?file=app%2Ftable-filtering-example.css

冻结屏幕顶部的<div>，使其余的<div>填充屏幕并滚动

1 个答案: