如何将全高设置为垫子步骤内容答案

【问题标题】：how to set full-height to a the mat step content如何将全高设置为垫子步骤内容
【发布时间】：2020-07-11 18:29:45
【问题描述】：

我的应用中有一些水平步进器，我想在其中一个中将内容高度设置为 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-horizontal-content-container 和 .mat-horizontal-stepper-content 类应该可以工作，但是我的其他步进器会受到影响。这是一种方法吗？

有一个工作示例

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

【问题讨论】：

标签： angular mat-stepper

【解决方案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

【讨论】：

谢谢，这个解决方案的关键不是这个html，其实如果你测试这个html是不行的，关键是它使用了封装：ViewEncapsulation.None，然后编辑css。