我在屏幕底部有一个按钮。这是我的按钮的 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)
最佳答案
试试这个:
.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;
}
关于ios - 如何解决位置:fixed for a button at the bottom of the screen in iOS (ipad/iphone)?的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52789446/