webapp中fixed问题解决方案
浏览数：27 /
时间：2015年06月11日
主要问题：
1，头部输入框固定后，只要再滑动内容的话，输入框会随着滑动内容而滑动。
2，在低端机：2.3以下的安卓机，你会发现怎么解决都不行的，系统浏览器是不会支持的，头部底部固定的话会滑动内容而滑动。
flex模拟fixed(推荐使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex模拟fixed</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
html,body{
height:100%;
margin:0;
padding:0;
}/**/
.wrap{height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-flex:1;display:flex;display:-webkit-flex;flex-direction:column;flex:1;-webkit-flex:1;}
.content{display:-webkit-box;-webkit-box-flex:1;flex:1;-webkit-flex:1;display:flex;display:-webkit-flex;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:5px 5px 60px 5px;}
header,footer{position:fixed;z-index:1;left:0;right:0;
height:40px;
text-align:center;
width:100%;
line-height:40px;
background:#fff;
}
header{
border-bottom:1px solid #ccc;
}
footer{
border-top:1px solid #ccc;
bottom:0;
}
h1{margin:0; }
</style>
</head>
<body>
<div class="wrap">
<header class="">
<h1 class=""><input type="text"/></h1>
</header>
<div class="content">
<div class="">
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2><input type="text"/></h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content-last</h2>
</div>
</div>
<footer class="">
<input type="text"/>
</footer>
</div>
</body>
</html>
absolute模拟fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute模拟fixed</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone‘s home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
html,
body{height:100%;margin:0;padding:0;}
header,footer{height:40px; text-align:center; position:absolute; width:100%; line-height:40px; background:#fff; z-index:2;}
header{border-bottom:1px solid #ccc;top:0;}
footer{border-top:1px solid #ccc;bottom:0;}
h1{margin:0; }
.content{position:absolute;top:40px;left:0;right:0;bottom:40px; box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;}
</style>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title"><input type="text"/></h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2><input type="text"/></h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content</h2>
<h2>content-last</h2>
</div>
<footer class="bar bar-footer">
<input type="text"/>
</footer>
</body>
</html>
目前还会存在的一些问题，页面第一次点击底部输入法是会挡住输入框的，这个情况我测试IOS8系统的时候会出现，小米1S安卓4.0系统没这个问题。
其实可以把底部高度稍微调高点就行；或是点击输入框的时候来一次刷新就不会有这个问题了。
目前我能提供的也只是这个解决方案了，也适合做头部底部fixed固定。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
