材质柔性版式-小屏幕时，一个网格与另一个网格重叠

Question

创建了this stackblitz。

在台式机和全屏模式下，输出效果不错，但是在浏览器窗口大小较小的情况下，一个网格与另一个网格重叠。

我希望网格高度为100％，以便将内容放入其中，并且当屏幕较小时，一个网格应占据整个屏幕，即，不大于或小于整个屏幕高度减去顶部导航栏。 / p>

不确定，但是可能是由于下面的CSS代码。但是，如果删除这些CSS代码，则不会获得全屏网格。这意味着它看起来像下面的

CSS：

.mat-drawer-content {
    position: absolute !important;
}

.mat-grid-list {
    height: 100%;
}

.mat-grid-list {
  position: initial !important;
}

Answer 1

IME非常棘手-可能是不可能的-绕过MatGrid自己的布局机制并使用CSS或flex-layout强制其以某种方式表现，因为该组件被设计为使用计算来动态布局。您已经用cols正确地完成了操作，但是您需要将相同的想法应用于rowHeight。像这样：

<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">

...

breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }

ngOnInit() {
  this.resize(window.innerWidth);
}

onResize(event) {
  this.resize(event.target.innerWidth);
}

resize(width: number) {
  if (width <= 400) {
    this.breakpoint = 1;
    this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
  } else {
    this.breakpoint = 4;
    this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
  }
}

请注意，您还需要对网格应用某种固定的高度-可能通过网格的父容器（在您的示例中为demo-component），并使网格采用其父容器的高度：

:host {
  height: 300px !important;
  align-self: stretch;
  flex: 1 0 100%;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
.mat-grid-list {
  flex: 1 1 100%;
}

这并不完全完美，但是要好得多。 Here it is on StackBlitz。