解决ios上软键盘呼出的时候position fixed飘动的问题

最新推荐文章于 2021-03-25 14:19:22 发布

diaokuang4523

最新推荐文章于 2021-03-25 14:19:22 发布

阅读量160

点赞数

原文链接：http://www.cnblogs.com/huangcj/p/5461896.html

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/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;
}

main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;

增加该属性，可以增加弹性

*/
-webkit-overflow-scrolling: touch;
}

main .content {
height: 2000px;
}
</style>

</head>
<body class="layout-scroll-fixed">

<header>

</header>


<main>
<div class="content">

content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br> content <br>
content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br>
content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br>
content <br> content <br> content <br> content <br> content <br> content <br> content <br>
</div>
</main>


<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
</html>