iOS下的 Fixed + Input BUG现象

Posted 迷失地

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS下的 Fixed + Input BUG现象相关的知识,希望对你有一定的参考价值。

<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>

</header>

<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>

<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
注:注意使用弹性滚动















































以上是关于iOS下的 Fixed + Input BUG现象的主要内容,如果未能解决你的问题,请参考以下文章

Web移动端Fixed布局的解决方案

[转] Web移动端Fixed布局的解决方案

iOS下的 Fixed BUG

[BUG]ios中input不回弹,导致fixed布局错位

iOS下的 Fixed + Input(时间日期选择select 选择等等) 出现的问题

web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决