如何解决位置问题：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