如何使用 PrimeNG、PrimeFlex 和 h-screen 在没有滚动条的情况下实现完整视口高度？

Question

我正在使用 Angular 以及 PrimeNG 和 PrimeFlex 构建一个界面。我想要一个容器填充屏幕的整个高度，而不出现任何滚动条。我尝试过使用

h-screen

和

h-full

类，但元素超出了视口高度，导致出现滚动条。

我尝试过的：

• 用 h-full 替换 h-screen。
• 确保没有外部边距或填充导致溢出。

GitHub 存储库： 为了帮助排除故障，我在 GitHub 上提供了一个最小的可重现示例。您可以使用以下命令克隆存储库、安装依赖项并运行项目：

git clone https://github.com/kashif-khan/PrimeNgAngular.git
cd PrimeNgAngular
npm install
npm start

这是我的代码的简化版本：

<div class="">
  <div class="m-5 p-5 text-5xl text-center">This is navbar</div>

  <p-splitter [panelSizes]="[20, 60, 20]" styleClass="m-0 p-0 h-screen">
    <ng-template pTemplate>
      <div class="col flex align-items-center justify-content-center bg-red-400 text-5xl text-white">
        Panel 1
      </div>
    </ng-template>
    <ng-template pTemplate>
      <div class="col flex align-items-center justify-content-center bg-green-400 text-5xl text-white">
        <p-card header="Car header" subheader="Card Subheader" styleClass="w-full">
          <ng-template pTemplate="header">
            <div class="flex flex-row-reverse flex-wrap">
              <p-button label="Float right" styleClass="m-2" />
            </div>
          </ng-template>
          <ul>
            <li>Ensure that this card occupies the entire height and width of the green panel.</li>
          </ul>
          <ng-template pTemplate="footer">
            <div class="flex flex-row mt-1">
              <div class="flex align-items-center justify-content-start">
                <p-button label="Float left" severity="secondary" />
              </div>
              <div class="flex align-items-center justify-content-end">
                <p-button label="Float right" />
              </div>
            </div>
          </ng-template>
        </p-card>
      </div>
    </ng-template>
    <ng-template pTemplate>
      <div class="col flex align-items-center justify-content-center bg-blue-400 text-5xl text-white">
        Panel 3
      </div>
    </ng-template>
  </p-splitter>
</div>

Answer 1

您需要一个垂直的 p 分离器，然后是水平分离器，这将为您提供所需的结果。

<p-splitter 
    [panelSizes]="[20, 80]" styleClass="m-0 p-0 h-screen"
    layout="vertical">
        <ng-template pTemplate>
            <div class="h-100  w-100 flex align-items-center justify-content-center">This is navbar</div>
        </ng-template>
        <ng-template pTemplate>
            <p-splitter [panelSizes]="[20, 60, 20]" styleClass="m-0 p-0">
                <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center bg-red-400 text-5xl text-white">
                    Panel 1
                </div>
                </ng-template>
                <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center bg-green-400 text-5xl text-white">
                    <p-card header="Car header" subheader="Card Subheader" styleClass="w-full">
                    <ng-template pTemplate="header">
                        <div class="flex flex-row-reverse flex-wrap">
                        <p-button label="Float right" styleClass="m-2" />
                        </div>
                    </ng-template>
                    <ul>
                        <li>Ensure that this card occupies the entire height and width of the green panel.</li>
                    </ul>
                    <ng-template pTemplate="footer">
                        <div class="flex flex-row mt-1">
                        <div class="flex align-items-center justify-content-start">
                            <p-button label="Float left" severity="secondary" />
                        </div>
                        <div class="flex align-items-center justify-content-end">
                            <p-button label="Float right" />
                        </div>
                        </div>
                    </ng-template>
                    </p-card>
                </div>
                </ng-template>
                <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center bg-blue-400 text-5xl text-white">
                    Panel 3
                </div>
                </ng-template>
            </p-splitter>
        </ng-template>
</p-splitter>