首页 > 代码库 > webapp中fixed问题解决方案
webapp中fixed问题解决方案
主要问题：
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固定。
webapp中fixed问题解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。