时间戳

首页 > 解决方案 > 如何将子组件高度扩展到父高度

angular - 如何将子组件高度扩展到父高度

问题描述

我有一个使用 flex-layout 的卡片组件。我想将高度扩展到父组件高度的大小。这是卡片html

<div 
  gdAreas="header header | side content | footer footer"
  gdGap="16px"
  gdRows="auto auto auto"
  gdAreas.lt-md="header | side | content | footer"
    gdRows.lt-md="auto auto auto auto"
  >

    <div class="header" gdArea="header">
    <p>
            Buy and sell good stocks using conservative indicators.
    </p>
    </div>

      <div class="side" gdArea="side">
        <p>
                side    </p>
    </div>

    <div class="content" gdArea="content">
        <button mat-button color="basic">Try </button>
   </div>

    <div class="footer" gdArea="footer">
        Footer
    </div>
</div>

这是父组件html：

<app-nav></app-nav>
<div 

  fxLayoutGap="32px" 
  fxLayoutAlign="flex-start">

  <!-- dummy loop -->
    <ng-container *ngFor="let _ of [1]">

     <app-card 
      fxFlex="100%"
      fxFlex.lt-md="100%"
      fxFlex.lt-sm="100%"
    ></app-card>

    </ng-container>
</div>
<router-outlet></router-outlet>

目前卡片组件占据了app父组件的三分之一。

标签： angularangular-flex-layout

解决方案

您可以添加fxFlexFill来填充父级的高度

<ng-container *ngFor="let _ of [1]">
 <app-card 
  fxFlexFill  // here
  fxFlex.lt-md="100%"
  fxFlex.lt-sm="100%"
></app-card>

您也可以尝试 100vh 而不是 100%

推荐阅读