如何让固定内容超越iOS键盘？
我只能在人们有相反问题的地方找到问题 我希望我的固定内容在iOS键盘上方。 问题的图像： 我希望iOS能像Android一样运行 有没有一个简单的方法来实现这一点 父元素css：如何让固定内容超越iOS键盘？,ios,css,iphone,google-chrome,safari,Ios,Css,Iphone,Google Chrome,Safari,我只能在人们有相反问题的地方找到问题 我希望我的固定内容在iOS键盘上方。 问题的图像： 我希望iOS能像Android一样运行 有没有一个简单的方法来实现这一点 父元素css： .parent{ position:fixed; top: 0; left 0; right: 0; bottom: 0; width: 100%; height: 100%; } 按钮css： .button{ position:fixed;
.parent{
position:fixed;
top: 0;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.button{
position:fixed;
left 0;
right: 0;
bottom: 0;
width: 100%;
height: 5rem;
}
Mobile Safari不支持位置：在显示以输入为中心的虚拟键盘时修复 要强制它以与移动Chrome相同的方式工作，您必须对整个页面使用position:absolute、height:100%，或者为您的伪固定元素、截取滚动、触摸结束、聚焦和模糊事件使用容器 诀窍是在激活焦点之前将点击的输入控件置于屏幕底部。在这种情况下，iOS Safari始终可预测地滚动视口，window.innerHeight变为完全可见的高度 在Mobile Safari中打开，查看其工作原理 请避免使用有多个可聚焦元素的表单，因为需要更多的技巧来确定位置，这些只是为了演示目的而添加的 注意，对于旋转和横向模式，需要额外的技巧。我正在开发一个名为Tuff.js的框架，它将提供一个全屏容器，帮助移动web开发人员更快地构建web应用程序。我花了将近一年的时间做这项研究 顺便说一句，当虚拟键盘处于活动状态时，为了防止整个窗口滚动，您可以使用这个超级简单的技巧
var hack=document.getElementById（'scroll-hack'）；
函数addScrollPixel（）{
if（hack.scrollTop==0）{
//元素位于其滚动位置的顶部，因此向下滚动1个像素
hack.scrollTop=1；
}
if（hack.scrollHeight-hack.scrollTop===hack.clientHeight）{
//元素位于其滚动位置的底部，因此向上滚动1个像素
hack.scrollTop-=1；
}
}
if（window.addEventListener）{
//避免只在每个滚动事件上启动一个函数，因为它可能会影响性能。
//您应该添加一个“去抖动”来限制函数被触发的次数
hack.addEventListener（'scroll'，addScrollPixel，true）；
}else if（窗口附件）{
hack.attachEvent（'scroll'，addScrollPixel）；
}正文{
保证金：0自动；
填充：10px；
最大宽度：800px；
}
h1>小{
字体大小：50%；
}
.集装箱{
显示器：flex；
对齐项目：顶部；
证明内容：之间的空间；
}
.container>div{
边框：#000 1px实心；
高度：200px；
溢出：自动；
宽度：48%；
-webkit溢出滚动：触摸；
}overflow:auto；-webkit overflow-scrolling:touch；- 一,
- 二,
- 三,
- 四,
- 五,
- 六,
- 七,
- 八,
- 九,
- 十,
- 十一,
- 十二,
- 十三,
- 十四,
- 十五
- 十六,
- 十七,
- 十八
- 十九,
- 二十
- 一,
- 二,
- 三,
- 四,
- 五,
- 六,
- 七,
- 八,
- 九,
- 十,
- 十一,
- 十二,
- 十三,
- 十四,
- 十五
- 十六,
- 十七,
- 十八
- 十九,
- 二十
你能看一下吗？我使用了
位置：绝对