如何解决iOS(ipad/iphone)中屏幕底部按钮position:fixed的问题？

Question

我在屏幕底部有一个按钮。这是我的按钮的 CSS 样式：

.bottomfixed {
    width: 92%;
    display: block;
    height: 68px;
    border-radius: 6px;
    background-color: #f27d00;
    font-family: Helvetica-Bold, Arial;
    border: solid 0;
    outline: solid 12px #fff;
    font-size: 24px;
    color: #fff;
    margin: 0% 4% 0% 4%;
    position: fixed;
    bottom: 10px;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

如您所见，我已经为按钮设置了 position:fixed，但它在 iOS（iPhone 和 iPad）

中不起作用

我也有输入框。当我专注于此输入框时，虚拟键盘在 iPhone 和 iPad 中打开，并且由于此按钮与键盘重叠并且按钮的固定位置被忽略

然而，这在 android 手机等其他设备上运行良好。

那么如何使用 CSS 或 javascript 解决这个问题呢？（注：我的编程语言是PHP）

Answer 1

试试这个：

.bottomfixed 
{
   position:absolute;
   top:calc(100vh - (68px + 10px));
  /* 100 viewport height minus the height of the button and the height of the bottom position */
}

而不是这个：

.bottomfixed 
{
   position: fixed;
}

位置固定但未固定：https://codepen.io/carolmckayau/pen/qJXvGZ

如何解决iOS(ipad/iphone)中屏幕底部按钮position:fixed的问题？

How to solve the issue of position:fixed for a button at the bottom of the screen in iOS (ipad/iphone)?

ios

css

iphone

ipad