ionic4-div容器自适应手机屏幕高度

ionic4-div容器自适应手机屏幕高度

需求：
手机大小不一，高度不一，此处俩div需要根据手机大小不同，始终撑满一个屏。
1.yingli.component.html：

<ion-content style="padding: 15px;" fullscreen scroll-x="false">

    <div class="echart-container div-scrollbar">
        <!-- 此div容器需要自适应屏幕高度 -->
        <div class="divEcharts divEcharts1" *ngIf="searchCondition.heatmap" echarts [options]="optionHeatmap"></div>
    </div>

    <ion-item-divider>
        <ion-label></ion-label>
    </ion-item-divider>

    <div class="echart-container div-scrollbar">
        <!-- 此div容器需要自适应屏幕高度 -->
        <div class="divEcharts divEcharts2" *ngIf="searchCondition.bar" echarts [options]="optionBar"></div>
    </div>

</ion-content>

2.yingli.component.ts：

import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
@Component({
  selector: 'yingli',
  templateUrl: './yingli.component.html',
  styleUrls: ['./yingli.component.scss'],
})
export class YingliComponent implements OnInit {
  constructor(
      private el: ElementRef,
      private renderer2: Renderer2
  ) { }
 
 async ionViewDidEnter() {
    //自适应屏幕高度
    let divEcharts1 = (this.el.nativeElement.querySelector('div.divEcharts.divEcharts1') as HTMLElement);
    let divEcharts2 = (this.el.nativeElement.querySelector('div.divEcharts.divEcharts2') as HTMLElement);
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    console.log('h:',h);
    this.divEchartsStyle['height'] = (h-98)/2 + 'px';
    this.renderer2.setStyle(divEcharts1,'height',this.divEchartsStyle['height']);
    this.renderer2.setStyle(divEcharts2,'height',this.divEchartsStyle['height']);
  }
}  

3.yingli.component.scss：

div.divEcharts{
  width: 1740px;
  background-color: #f9f8f8;
}
div.divEcharts.divEcharts1{
  //height: 300px;
  margin: 60px 0px 0px 0px;
}
div.divEcharts.divEcharts2{
  //height: 300px;
  margin: 0px 0px 0px 0px;
}