<p><strong>问题：</strong>
我正在尝试在angular中设置一个prime p-table的高度。我已经在网上搜索了很多结果，但到目前为止都没有起作用（可能是由于这个问题存在多年，并且对框架进行了一些更改，禁用了某些解决方案）。</p>
<p>我已经尝试了两种方法，第一种方法在下面的代码中。第二种方法是将p-table的父div的高度设置为innerWindowHeight，并将p-table的scrollheight设置为flex（也不起作用）。</p>
<p><strong>工具：</strong>Angular 14.2.0和PrimeNG 14.1.1在一个新项目中</p>
<p>我在<strong>app.component.html</strong>中有以下html代码：</p>
<pre class="brush:php;toolbar:false;"><div>
<p-table #table
(window:resize)="onResize()"
[value]="data"
[paginator]="true"
[showCurrentPageReport]="true"
[scrollable]="true"
[scrollHeight]="tableScrollHeight"
[rows]="10"
[rowsPerPageOptions]="rowsPerPage"
styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm"
currentPageReportTemplate="{first} to {last} of {totalRecords} records">
<ng-template pTemplate="header">
<tr>
<th>日期</th>
<th>ID</th>
<th>描述</th>
<th>值</th>
<th>税</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-entry>
<tr>
<td>{{entry.date}}</td>
<td>{{entry.id}}</td>
<td>{{entry.description}}</td>
<td>{{entry.value}}</td>
<td>{{entry.tax}}</td>
</tr>
</ng-template>
</p-table>
</div></pre>
<p>以及以下的<strong>app.component.ts</strong>：</p>
<pre class="brush:php;toolbar:false;">import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Testapp';
data: any[];
tableScrollHeight: string = "700px";
rowsPerPage: number[] = [5, 10, 20, 50];
constructor() {
this.data = [];
let entry: any = {};
entry.description = "First entry";
this.data.push(entry);
}
onResize() {
this.tableScrollHeight = window.innerHeight + 'px';
}
}</pre>
<p><strong>我想实现的行为：</strong>
我希望无论表格是否为空或者没有足够的条目来填充窗口，分页器都保持在窗口底部，并且当表格行大于屏幕大小时，表格可以滚动（头部保持在顶部）。</p>
<p>为了澄清我想要实现的目标，这里有一个截图展示它的当前状态：
当前状态</p>
<p>这里有一个截图展示我希望它看起来的样子：
应该的样子</p>
<p><strong>问题：</strong>
有没有办法以一种干净的方式实现这个目标？</p>
<p>如评论中建议的那样，我添加了一个<strong>stackblitz</strong>：https://angular-ivy-sfk7pw.stackblitz.io</p>
<p><strong>编辑：</strong>
我发现如果将table的scrollHeight设置为表格内部的一个<strong>div</strong>（由primeng生成），该div的类名为<strong>p-datatable-wrapper</strong>，它会获得样式"<strong>max-height</strong>: <strong>XXX</strong>px"，其中<strong>XXX</strong>是<strong>tableScrollHeight的值</strong>。我可以写一个CSS选择器将样式更改为min-width，但这可能不是一个好主意，因为我将不得不从typscript文件中访问dom并搜索自动生成的div。</p>
1
901
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
也许你可以尝试将这个样式添加到你的
css/scss中，但这并不是最佳实践。.p-datatable-wrapper { min-height: calc(100vh - 90px); }注意：
100vh是你的屏幕高度，90px是一个示例的分页高度。就是这样。希望能对你有所帮助。