如何用PrimeNG、PrimeFlex和h-screen实现无滚动条全屏高度

核心问题分析 #

当前布局溢出是三个原因导致的：

• 浏览器默认body存在外边距，会额外占用视口空间
• 顶部导航栏的m-5外边距，加上Splitter的h-screen设置，总高度超过了视口高度
• Splitter内部的卡片未设置填充父容器的布局规则

分步解决方案 #

1. 重置全局默认样式

在项目的styles.css（或styles.scss）中添加以下代码，消除浏览器默认的边距：

body {
  margin: 0;
  padding: 0;
}

2. 重构外层布局结构

将最外层容器改为垂直Flex布局，让导航栏自适应高度，Splitter占满剩余视口空间：

<div class="flex flex-col h-screen">
  <!-- 导航栏：去掉m-5避免额外外边距，用p-5保留内边距 -->
  <div class="p-5 text-5xl text-center">This is navbar</div>

  <!-- Splitter：用flex-1占满剩余高度，h-full确保自身填充父容器 -->
  <p-splitter [panelSizes]="[20, 60, 20]" styleClass="flex-1 h-full 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>
      <!-- 绿色面板改为垂直Flex布局，让卡片填充整个面板 -->
      <div class="col flex flex-col bg-green-400 p-4">
        <p-card header="Car header" subheader="Card Subheader" styleClass="flex-1 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>
          <div class="flex-grow">
            <ul>
              <li>Ensure that this card occupies the entire height and width of the green panel.</li>
            </ul>
          </div>
          <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>

3. 关键修改点说明

• 最外层容器用flex flex-col h-screen：垂直排列子元素，整体占满视口高度
• 导航栏移除m-5：避免外边距导致整体高度溢出，保留p-5维持内边距
• Splitter添加flex-1：自动填充导航栏下方的剩余空间，替代h-screen避免重复计算高度
• 绿色面板用flex flex-col：让内部卡片可以通过flex-1填充整个面板高度
• 卡片添加flex-1：确保卡片高度填满父容器，同时用w-full占满宽度

验证效果 #

修改后运行项目，整个布局会完全填满视口且无滚动条，绿色面板内的卡片也会自动填充整个面板空间。

内容的提问来源于stack exchange，提问作者Kashif Khan