Ionic 3移动端Footer被键盘顶起，求助固定至页面底部的方法

Hey there! I notice you're new to Ionic and struggling with your footer being pushed up when the keyboard opens—let's get this sorted out for you. First, quick heads-up: it looks like you shared your home.html code labeled as home.ts (easy mix-up when you're starting out!), but that doesn't stop us from fixing the issue.

Here are a few reliable solutions to keep your footer anchored at the bottom:

1. Adjust Config.xml Settings (Simplest Fix) #

The easiest way is to tell Ionic not to resize the page when the keyboard pops up. Open your project's config.xml file and add these preferences:

<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="native" />

This disables the automatic page resizing that causes the footer to shift. Most of the time, this alone will fix the problem.

2. Use the Keyboard Plugin for Dynamic Control #

Since you already have the Keyboard plugin imported in your app.ts, we can use its events to adjust styles when the keyboard shows/hides. Update your app.ts code like this:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(
    platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen, 
    private keyboard: Keyboard // Mark this as private to use in the component
  ) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      // Listen for keyboard open event
      this.keyboard.onKeyboardShow().subscribe(() => {
        document.body.classList.add('keyboard-active');
      });

      // Listen for keyboard close event
      this.keyboard.onKeyboardHide().subscribe(() => {
        document.body.classList.remove('keyboard-active');
      });
    });
  }
}

Then add this CSS to your app.scss file to lock the footer in place when the keyboard is active:

.keyboard-active ion-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

3. Pure CSS Layout Adjustment #

If you prefer not to rely on plugin events, you can tweak your page's CSS to ensure the footer stays at the bottom. Add this to your home.scss:

ion-content {
  flex: 1; // Ensures the content takes up all available space above the footer
}

ion-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
}

This uses flexbox to push the footer to the bottom of the viewport, regardless of keyboard state.

Quick Check #

Make sure you've properly installed the Keyboard plugin if you're using solution 2. If you haven't, run these commands in your project folder:

ionic cordova plugin add ionic-plugin-keyboard
npm install @ionic-native/keyboard

Start with solution 1 first—it's the fastest and most straightforward. If that doesn't work for your specific setup, try the other methods. You'll have that footer fixed in no time!

内容的提问来源于stack exchange，提问作者roopteja