Angular中router-outlet占满剩余空间时mat-grid-list布局失效求助

使用mat-grid-list实现1/3、2/3两栏布局异常的核心原因是全链路高度传递断裂，从视口到最内层的mat-grid-list没有形成连续的高度计算路径，导致rowHeight="fit"无法获取有效父级高度，最终出现布局塌陷、空间占比失效的问题。

基础布局搭建步骤 #

1. 配置全局高度基础 #

在全局样式文件中移除默认边距，打通从视口到根组件的高度传递链路：

/* styles.css 全局公共样式 */
html, body {
  height: 100%;
  margin: 0;
}
app-root {
  display: block;
  height: 100%;
}

2. 调整根组件的工具栏布局 #

将根组件改为垂直弹性布局，保证顶部工具栏固定在最上方，所有剩余空间全部交给路由出口的承载容器：

• 根组件模板结构（app.component.html）：

<mat-toolbar color="primary" class="top-toolbar">
  <span>页面标题</span>
  <span class="flex-spacer"></span>
  <button mat-icon-button aria-label="登出操作">
    <mat-icon>logout</mat-icon>
  </button>
</mat-toolbar>

<!-- 专门承载路由组件的容器，占满工具栏外的所有空间 -->
<div class="route-wrapper">
  <router-outlet></router-outlet>
</div>

• 根组件配套样式（app.component.css）：

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.top-toolbar {
  flex-shrink: 0; /* 保证工具栏高度固定，不被压缩 */
}
.flex-spacer {
  flex: 1; /* 把按钮推到工具栏最右侧 */
}
.route-wrapper {
  flex: 1; /* 抢占所有剩余可用高度 */
  overflow: hidden; /* 避免内部内容溢出撑开容器 */
}

3. 修正dashboard组件的高度传递 #

之前的配置缺失了dashboard组件本身的高度设置，导致内部的mat-grid-list拿不到正确的计算高度，只需要补充对应样式即可：

• dashboard组件样式（dashboard.component.css）：

:host {
  display: block;
  height: 100%;
}

• 原本编写的mat-grid-list模板无需调整，高度链路打通后即可正常生效：

<!-- 3列栅格，自适应行高，列间距16px -->
<mat-grid-list cols="3" rowHeight="fit" gutterSize="16px">
  <!-- 第一栏占1列宽度，即总宽度的1/3 -->
  <mat-grid-tile>
    <app-business></app-business>
  </mat-grid-tile>
  <!-- 第二栏占2列宽度，即总宽度的2/3 -->
  <mat-grid-tile [colspan]="2">
    <app-reservations></app-reservations>
  </mat-grid-tile>
</mat-grid-list>

常见异常排查提示 #

• 不要给mat-grid-list硬编码固定高度，依赖父级传递的高度做自适应计算即可
• router-outlet是纯路由占位符，不会渲染实际DOM节点，不能直接作为弹性布局的子元素，必须额外包裹一层承载高度的容器
• 所有嵌套层级的高度传递不能中断，只要任意一层容器没有拿到正确的高度值，mat-grid-list的fit模式就会因为计算基准值为0，出现内容堆叠、布局偏移的问题

内容的提问来源于stack exchange，提问作者Samuele Pilleri