可以得到离子脚的高度吗？

Question

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

我不需要得到离子含量的高度

<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());
    });
  }
}