The recommended solution is to implement it by setting safe-area-inset-bottom:

.footerClass {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

}
constant is for compatibility with versions before ios 11.0
env is a version after ios 11.2

tip
If it is found that it does not take effect on the real machine, you need to set the viweport-fit attribute

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, minimum-scale=1, maximum-scale=1.0, user-scalable=0">

It will take effect after setting it up.