Metronic 8.1.2模板中IgniteUI Grid无法占满宽度及高度异常问题

问题1：设置宽度100%时Grid无法占满可用宽度 #

直接给igx-grid加上[width]="'100%'"属性，明确强制宽度占满容器。另外，列的宽度分配要合理——把需要自适应的列（比如descrizione列）的宽度设为[width]="'*'"，让它自动填充剩余空间，避免列宽总和不够撑满容器。

如果Metronic的父容器自带max-width或内边距限制，Grid可能还是无法占满，这时候加个自定义CSS：

:host ::ng-deep .igx-grid {
  width: 100% !important;
}

调整后的列代码示例：

<igx-column field="descrizione" header="Descrizione" dataType="string" [width]="'*'"></igx-column>

问题2：移除height属性后Grid无限向下延伸 #

要让Grid在固定范围内滚动，别跟着内容无限长高：

• 启用虚拟滚动：给igx-grid加[virtualization]="true"，同时设个min-height（比如min-height="300px"），空数据时也能保持合理布局
• 用动态高度：通过calc()结合视口高度设置，比如[height]="'calc(100vh - 250px)'"，让Grid自动适配页面剩余空间
• 依赖父容器高度：给Grid的父容器设明确高度和overflow: auto，让Grid继承父容器高度：

.grid-container {
  height: 400px;
  overflow: auto;
}

完整修改后的代码 #

<div class="grid-container">
  <igx-grid [data]="Items" [width]="'100%'" min-height="300px" [virtualization]="true"
            primaryKey="id" [allowFiltering]="true" [rowEditable]="true"
            (rowAdd)="addRow($event)">
    <igx-grid-toolbar>
      <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
      <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
      </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    <igx-column field="id" [hidden]="true" dataType="string"></igx-column>
    <igx-column field="tipo" header="Tipo" dataType="string"></igx-column>
    <igx-column field="descrizione" header="Descrizione" dataType="string" [width]="'*'"></igx-column>
    <igx-column [width]="'100px'">
      <ng-template igxCell let-cell="cell">
        <button igxButton="icon" (click)="editItem(cell.row.data)">
          <igx-icon>edit</igx-icon>
        </button>
        <button igxButton="icon" (click)="deleteItem(cell.row.data)">
          <igx-icon>delete</igx-icon>
        </button>
      </ng-template>
    </igx-column>
  </igx-grid>
</div>

对应的CSS：

.grid-container {
  height: calc(100vh - 200px);
  overflow: hidden;
}

:host ::ng-deep .igx-grid {
  width: 100% !important;
}

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