angular - 如何将全高设置为垫子步骤内容

Question

我的应用程序中有一些水平步进器，我想在其中一个中将内容高度设置为 100%。

我做不到

<div style="height: 500px; border: 2px solid blue;">
 <mat-horizontal-stepper #stepper fxFlexFill style="background: red">
   <mat-step label="Step 1" fxFlexFill>
     <div style="border: 2px solid green;" fxFlexFill>
       test size 
     </div>
   </mat-step>
   <mat-step label="Step 2" fxFlexFill>
     <div style="border: 2px solid green;" fxFlexFill>
        test size 
      </div>
   </mat-step>
 </mat-horizontal-stepper>
</div>

我想更新 mat-h​​orizo​​ntal-content-container 和 .mat-h​​orizo​​ntal-stepper-content 类应该可以工作，但是我的其他步进器会受到影响。这是一种方法吗？

有一个工作示例

https://stackblitz.com/edit/angular-zcvugh?file=src%2Fapp%2Fapp.component.html

Answer 1

我希望这个解决方案能帮助你

<div fxLayout style="height: 95%">
    <mat-horizontal-stepper fxLayout="column" fxFlex="100" fxLayoutAlign=" stretch" #stepper style="background: #DDD">
        <mat-step label="Step 1" fxFlex="100"  fxLayout="column">
            <div style="border: 2px solid green;" fxFlex="100">
                <div fxFlex="100" fxFill style="border: 2px solid red;">
                    Step 1: must fill the entire space
          <p>Issues? <a href="mailto:&#103;&#105;&#116;&#104;&#117;&#098;&#064;&#116;&#111;&#110;&#121;&#115;&#097;&#109;&#112;&#101;&#114;&#105;&#046;&#105;&#116;">Text me!</a>
                </div>
            </div>
        </mat-step>
        <mat-step label="Step 2">
            <div style="border: 2px solid green;height:100%;">Step 2: must fill the entire space too, but it's shifted down!</div>
        </mat-step>
        <mat-step label="Step 3">
            Step 3: This is even more shifted!
        </mat-step>
        <mat-step label="Step 4">
            Step 4: ...
        </mat-step>
    </mat-horizontal-stepper>
</div>

StackBlitz