ios - 如何解决位置:fixed for a button at the bottom of the screen in iOS (ipad/iphone)?的问题

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