Как установить высоту p-таблицы на высоту окна ⇐ CSS

[Гость]

Проблема: Я пытаюсь установить высоту простой p-таблицы в angular. Я уже поискал в сети и нашел много результатов, но ни один из них пока не помог (вероятно, из-за того, что эта проблема существовала в течение многих лет, а изменения в инфраструктуре отключили некоторые решения).

Я уже пробовал два подхода, первый из которых представлен в коде ниже. Второй — установить высоту родительского элемента div p-таблицы на внутреннийWindowHeight и установить для высоты прокрутки p-таблицы значение flex (тоже не работает).

Инструменты: Angular 14.2.0 и PrimeNG 14.1.1 в новом проекте

У меня есть следующий HTML-код в app.comComponent.html:

Дата Идентификатор Описание Значение Налог {{entry.date}} {{entry.id}} {{entry.description}} {{entry.value}} {{entry.tax}} И следующий app.comComponent.ts:

импортировать {Component} из @angular/core; @Компонент({ селектор: 'app-root', templateUrl: './app.comComponent.html', styleUrls: ['./app.comComponent.css'] }) класс экспорта AppComponent { заголовок = 'Тестовое приложение'; данные: любые[]; tableScrollHeight: string = "700px"; rowsPerPage: число [] = [5, 10, 20, 50]; конструктор() { this.data = []; пусть запись: любой = {}; запись.description = "Первая запись"; this.data.push(запись); } onResize() { this.tableScrollHeight = window.innerHeight + 'px'; } } Поведение, которое я хочу реализовать: Я хочу, чтобы Paginator оставался в нижней части окна, даже если таблица пуста или в ней недостаточно записей для заполнения окна, и чтобы таблица была прокручиваемой (заголовок оставался вверху), как только строка таблицы больше размера экрана.

Чтобы прояснить, что я хочу сделать, приведу скриншот, как это выглядит: Как это выглядит сейчас

А вот скриншот того, как я хочу, чтобы это выглядело: Как это должно выглядеть

Вопрос: Можно ли добиться этого чистым способом?

Как было предложено в комментарии, я добавил stackblitz: https://angular-ivy-sfk7pw.stackblitz.io

Изменить: Я обнаружил, что если вы установите ScrollHeight таблицы, div внутри таблицы (сгенерированной из primeng) с классом p-datatable-wrapper получит стиль "max-height : XXXpx», где XXX — это значение из tableScrollHeight. Я, вероятно, мог бы написать селектор CSS, чтобы изменить стиль на минимальную ширину, но это, вероятно, не очень хорошая идея, поскольку мне пришлось бы получить доступ к dom из файла машинописного текста и искать автоматически созданный div.