如何让Angular Material Grid适配父组件视口高度？

你的问题并非全局section的100vh设置有误，而是mat-grid-list的默认样式与父容器布局配合出了问题：mat-grid-list默认带有内边距，且自身高度由内容撑开，不会自动占满父容器高度，导致它超出section范围，挤占了下方组件的空间。

修复步骤 #

1. 让bio-wrapper容器适配内部元素 #

给.bio-wrapper添加flex布局，强制内部的mat-grid-list占满容器高度：

.bio-wrapper {
    background: silver;
    display: flex;
    height: 100%; /* 继承section的100vh高度 */
}

2. 设置mat-grid-list占满父容器 #

给mat-grid-list设置高度为100%，同时移除默认内边距（避免因内边距导致超出容器）：

<section class="bio-wrapper">
    <mat-grid-list [cols]="2" style="height: 100%; padding: 0;">
        <mat-grid-tile>1</mat-grid-tile>
        <mat-grid-tile>2</mat-grid-tile>
        <mat-grid-tile>3</mat-grid-tile>
        <mat-grid-tile>4</mat-grid-tile>
    </mat-grid-list>
</section>

也可以把样式写到组件CSS文件中：

mat-grid-list {
    height: 100%;
    padding: 0;
}

3. （可选）调整网格瓦片高度 #

如果需要瓦片均匀占满网格高度，可给mat-grid-tile设置height: 100%，不过mat-grid-list在指定cols后会自动分配瓦片高度，一般无需额外设置，除非有特殊布局需求。

效果验证 #

修改后，mat-grid-list会完全适配section的100vh高度，不会再超出容器挤占下方组件空间，同时保持网格布局的完整性。

内容的提问来源于stack exchange，提问作者Seungeon Kim