A solution to determine the height of the footer is to use the reference to the content and access the contentBottom property:
contentBottom: Indicates how many pixels the bottom of the content has been adjusted, accounting for padding or margin to accommodate the footer.
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}`);
}
}
}
UPDATE:
Instead of directly using window.innerHeight, it is recommended to utilize the platform in order to obtain this information due to:
The platform internally uses window.innerWidth and
window.innerHeight. This method is preferred as it provides a cached value, reducing the need for multiple costly DOM reads.
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());
});
}
}