iOS下的 Fixed + Input 调用键盘的时候控件悬空
原理是:页面本来只有一屏,顶部与底部与内容部分。顶部底部fixed,小键盘弹起是将整个视口改变,所以中间增加scroll不会影响调起。但是还是存在一个bug:ios下滑动到底部以后不会停止,可以继续往下滑动漏出微信背景。待解决
html如下:
<body class="layout-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<section>
<!-- 内容在这里... -->
</section>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
css如下:
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; } section { margin-top: 50px; margin-bottom: 34px; height: 2000px }