I'm building an Ionic app that I also plan to deploy as a web app. For the web version, I want to add a footer that sticks below the content on every page, so the footer only appears when the user scrolls to the bottom of the content. To make this work, I removed <ion-content> and <ion-footer>, as they didn't allow the layout I’m aiming for. I also had to use #scrollingOuterDiv and #scrollingDiv to manage the scrolling behavior, but I’m not satisfied with this approach and would prefer a cleaner solution if possible. <ion-app> <ion-header> <app-header></app-header> </ion-header> <div #scrollingOuterDiv class="flex flex-col h-screen overflow-auto"> <div #scrollingDiv class="overflow-auto flex-grow min-h-[88vh] scroll-hide relative"> @if(globalStateService.isLoading()) { <ion-spinner class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" name="circular"></ion-spinner> } <router-outlet></router-outlet> </div> <app-footer class="flex-shrink-0"></app-footer> </div> </ion-app> Dependencies: Here are the dependencies I'm currently using: "dependencies": { "@angular/animations": "^18.0.0", "@angular/common": "^18.0.0", "@angular/compiler": "^18.0.0", "@angular/core": "^18.0.0", "@angular/forms": "^18.0.0", "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/router": "^18.0.0", "@capacitor/android": "6.1.2", "@capacitor/app": "6.0.1", "@capacitor/core": "6.1.2", "@capacitor/geolocation": "^6.0.1", "@capacitor/google-maps": "^6.0.1", "@capacitor/haptics": "6.0.1", "@capacitor/ios": "6.1.2", "@capacitor/keyboard": "6.0.2", "@capacitor/preferences": "^6.0.2", "@capacitor/status-bar": "6.0.1", "@ionic/angular": "^8.0.0", "ionicons": "^7.2.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.2" } Continue reading...
