求助:移动端 position: fixed;定位 软键盘弹出后的各种bug????

熙~ 2018-04-08 10:03:43



HTML:

<header>

</header>
<div class="main">
内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分
</div>
<footer>
<input />
<!--<textarea></textarea>-->
</footer>

css:

header,
footer{ color: #fff; text-align: center; line-height: 3rem; height: 3rem; width: 100%; position: fixed; z-index: 2;}
header{ background: red; top: 0;}
footer{ background: blue; bottom: 0;}
footer input{ height: 2rem; width: calc(100vw - 1rem); margin: 0.5rem;}
.main{ background: #c0c0c0; box-sizing: border-box; width: 100%; height: auto; overflow-y: scroll; padding-top: 3rem; padding-bottom: 3rem; position: absolute; left: 0; z-index: 1;}

网上看了好多帖子,有好多人有相关问题,但是貌似都没有解决,有大神帮忙解决下不?

我测试了移动端的微信、safari、chrome、Firefox、uc、opera

每款浏览器都会有bug
...全文
1384 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
幽饮烛 2018-05-16
  • 打赏
  • 举报
回复
都没说清楚什么BUG。 苹果手机的的 position 定位本来就有问题。所以对于苹果手机都需要特殊处理。

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧