关于CSS:如何解决位置问题:在iOS(ipad / iphone)屏幕底部的按钮上固定了?

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}

如您所见,我已经为按钮设置了位置:固定,但是在iOS(iPhone和iPad)中不起作用

我也有输入框。当我专注于此输入框时,则在iPhone和iPad中打开了虚拟键盘,并且由于此按钮被键盘覆盖,因此忽略了按钮的固定位置

但是,这在其他设备(例如android手机)中也能正常工作。

那么,如何使用CSS或javascript解决此问题?
(注意:我的编程语言是PHP)


尝试一下:

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

代替此:

1
2
3
4
.bottomfixed
{
   position: fixed;
}

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