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