离子2网格系统高度问题

Question

目标：

因此，标题位于顶部，页脚位于底部。

IT介于我之间的问题。

目前我的HTML是：

Private Sub exporttoexcel()
'excelFileName = 'File in my local'
Dim mySheetList() As String
Dim WS
Dim WB As Workbook
MsgBox excelFileName
'Dim sourceWB As Workbook
'Dim destWB As Workbook
'
'Set sourceWB = ActiveWorkbook
'sourceWB.Sheets.Copy
'
'Set WB = Workbooks(excelFileName)
    ReDim mySheetList(0 To (ThisWorkbook.Sheets.count) - 1)
     Dim a As Integer
      a = 0

      For Each WS In ThisWorkbook.Worksheets
          mySheetList(a) = WS.Name
          a = a + 1
       Next

Dim Fileobj
Set Fileobj = CreateObject("Scripting.FileSystemObject")
If Fileobj.FileExists(excelFileName) Then
    Fileobj.DeleteFile excelFileName
End If

'     'actually save
     Sheets(mySheetList).Copy
     ActiveWorkbook.SaveAs Filename:=excelFileName
     'MsgBox excelFileName

     'ThisWorkbook.SaveAs FileName:=excelFileName, FileFormat:=xlXMLSpreadsheet
     Application.Wait (Now + TimeValue("0:00:15"))
     WB.Close

End Sub

三个相关的类是amount-r，source-r，numpad -r。我的想法只是给他们百分比并根据设计调整他们的内容。但是，只要我百分比，离子网格高度就会变为零。我怎么把这一切都搞定了？最近的Ionic更新改变了我的所有样式。

对于像这样的流程的任何建议或示例将非常感激。

<ion-content>
  <ion-grid>
    <ion-row class="amount-r" justify-content-center align-items-center>
      <ion-col col-auto align-self-start text-center>
        <p class="amount" [innerHtml]="amount"></p>
      </ion-col>
    </ion-row>
    <ion-row class="source-r" justify-content-center align-items-center>
      <ion-col col-7>
        <ion-row align-items-end justify-content-center>
          <ion-col col-auto text-end>
            <p class="cpa-card-p" color="light">(Source:
              <ion-icon class="cpa-card-icon" name="card" ion-text color="light"></ion-icon>
              <span>{{source}}</span> )
            </p>
          </ion-col>
        </ion-row>
      </ion-col>
      <ion-col col-5>
        <ion-row align-items-start justify-content-center>
          <ion-col col-auto text-start>
            <button (tap)="changeSource()" ion-button clear no-padding no-margin>
            <p no-padding no-margin style="text-decoration: underline;" ion-text color="e-green">change</p>
            </button>
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
    <ion-row class="numpad-r" align-items-center justify-content-center>
      <numpad (pinUpdated)="numInput($event)"></numpad>
    </ion-row>
  </ion-grid>
</ion-content>