可以获得离子脚的高度

Question

我正在尝试获取初始窗口高度减去离子英尺高度。我成功了，但获得窗口高度仍然有页脚高度。有可能得到离子脚离子2元素的高度吗？

我不需要获取离子含量高度

<ion-footer>
  <button type="submit" form="loginForm" ion-button block class="rnb-button" [disabled]="!loginForm.valid">Log In</button>
</ion-footer>

TS

this.gridHeight = window.innerHeight;

我需要什么

this.gridHeight = window.innerHeight - footerHeight;

谢谢。

Answer 1

是的

，您可以使用对内容的引用来获取页脚的高度，使用 contentBottom 属性：

contentBottom：一个数字，表示底部的像素数 内容已调整，可以通过填充或 边缘。此调整是为了考虑 页脚。

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;
  ionViewDidEnter() {
    if(this.content) {
      console.log(`Footer height: ${this.content.contentBottom}`);
    }
  }
}

---

编辑：

这只是一个建议，但您应该使用platform来获取该信息，而不是使用window.innerHeight，因为：

在幕后，platform使用window.innerWidth和 window.innerHeight但首选使用此方法，因为 维度是一个缓存值，它减少了多个和 昂贵的 DOM 读取。

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
@Component({...})
export MyApp {
  constructor(platform: Platform) {
    platform.ready().then((readySource) => {
      console.log('Width: ' + platform.width());
      console.log('Height: ' + platform.height());
    });
  }
}