37464人阅读
小效果（9）
移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：
如何解决：
查阅资料之后想到一下几种解决方法
1，使用position：absolute模拟
&script type=&text/javascript&&
& & window.onscroll=function(){
& & $(&.fixed&).css(&top&,$(window).scrollTop());
& &$(&.foot&).css(&top&,$(window).scrollTop()+$(window).height());
问题来了：滑动页面时头部底部div会有明显的抖动。
2，判断当前获得焦点元素是input则隐藏div改为position：absolute
&body onload=setInterval(&a()&,500)&
&script type=&text/javascript&&
& function a(){
& & if(document.activeElement.tagName == 'INPUT'){ & &
& & & $(&.fixed&).css({'position': 'absolute','top':'0'});&
& & & &} else { &
& & & & &$(&.fixed&).css('position', 'fixed'); &
& &/script&
问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery
Mobile &没尝试，感觉会增负担。
4，重点来了：
只需要在中间部分外层div添加css样式position:top:50 bottom:50overflow:就可以实现效果，无需插件。可拷贝下面代码运行。
&!DOCTYPE html&
&html lang=&zh_cmn&&
&meta charset=utf-8 /&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1& /&
&meta name=&viewport& content=&width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0& /&
&title&&/title&
.head,.foot{position:left:0;height:38line-height:38width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:top:38bottom:38width:100%;overflow:background-color:#BABABA;}
&header class=&head&&顶部固定区域&/header&
&article class=&main& &id=&wrapper&& &
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &&p&当内容欲出隐藏时，灰色区域可上下拖动&/p&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & && &&input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& &input type=&text& value=&& class=&inputtext&& &br&
& &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& &&input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &&input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &input type=&text& value=&& class=&inputtext&& &br&
& & &content &br&
& & content &br&
& & content &br&
& & content &br&
& & content &br&
& & content &br&
& & content &br&
& & content &br&
& & content &br&
&/article&
&footer class=&foot&&底部固定区域&/footer&
&当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：119010次
积分：1450
积分：1450
排名：第19870名
原创：57篇
评论：38条
(3)(1)(1)(1)(2)(6)(6)(1)(1)(5)(5)(3)(1)(1)(2)(5)(5)(14)移动端用absolute代替fixed解决固定底部
代码片段 1效果预览&!Doctype html&
&meta charset=utf-8&
&meta name=viewport content=&initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width,minimal-ui&&
&title&用absolute代替fixed&/title&
html{ width:100%; height:100%;}
.bg{background-color:height:100%;width:100%;}
.bottom{position:width:100%;height:40background-color:}
&div class=&bg&&
&div class=&bottom&&&/div&
19 总笔记数
2.5万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：怎么让header和footer固定在顶部和底部，中间wrapper可以滚动，不能用position:fixed,用jquery怎么写？_百度知道
怎么让header和footer固定在顶部和底部，中间wrapper可以滚动，不能用position:fixed,用jquery怎么写？
name=&& max-*{script&gt.js&quot, maximum-scale=1;meta charset=&&&lt:0&script&
/body&gt.wrapper&jquery-1;&lt..javascript&);
$(window).wrapper{ min-width:#0CC;}&
var winH = $(window);div&gt.header{&);black&quot.wrapper&quot!doctype html&html&&/apple-mobile-web-app-status-bar-style&&#47:1000px.resize(autoSizeHeight);&):0.7;viewport&quot.0.wrapper&&head&&&lt:40apple-mobile-web-app-capable&quot.footer&&
}}& overflow-y;);html&&gt, initial-scale=1;&&lt:#CCC;head&gt.footer{$(function(){
autoSizeHeight();};&lt.height( winH - _top - footerH );});&lt:div&& background:header&};div class=&utf-8&&#47:&lt.0;& name=&meta content=&quot.2;yes&quot:100%;/&/; overflow-x;text/ 滚动区域
if( $(&.wrapper &body&meta name=&meta content=&&title&/style&gt.outerHeight(true):320/&lt./&lt:0 auto:#09C;;/style&title&& content=&无内容&);& src=&js/width=device-/wrapper&&#47, user-scalable=0&h3&gt:40px.footer&&&
$(&/div class=& name=&
if( $(& 高度自适应function autoSizeHeight(winH){
var footerH = 0;div class=&&meta content=&& list-telephone=no&footer& ;format-detection&div&script&& background:640h3&};&lt:100%;script type=&&&gt.height()!= 0){
footerH = $(&quot!= 0 ){
var _top = $(&&#47.offset();;/
给wrapper添加css样式max-height和overflow:max-height这个可以设个值或者自己算
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁不知道各位前端开发小伙伴们碰见过这个问题吗，就是在移动端开发时在给父元素设置-webkit-transform:translate3d(0px,0px,0px)这个属性后，子元素如果有position:fixed的属性设置的话就会失效，表现为不能固定在viewport的视口的固定位置了。然后去掉这条属性后，子元素又恢复position:fixed定位测试简单代码：大家用chrome的移动端模拟器或者手机上看看这个问题到底怎么解决，有没有碰到过类似情况啊，前端小伙伴们
这种具体到某个特性或者bug的问题，最好的寻找答案的方式是在stackoverflow搜索下。比如你这个问题：
已有帐号？
无法登录？
社交帐号登录移动端webapp开发transform属性影响position:fixed的纠结问题！！！？？？
不知道各位前端开发小伙伴们碰见过这个问题吗，就是在移动端开发时在给父元素设置-webkit-transform:translate3d(0px,0px,0px)这个属性后，子元素如果有position:fixed的属性设置的话就会失效，表现为不能固定在viewport的视口的固定位置了。然后去掉这条属性后，子元素又恢复position:fixed定位测试简单代码：大家用chrome的移动端模拟器或者手机上看看这个问题到底怎么解决，有没有碰到过类似情况啊，前端小伙伴们
按投票排序
规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素。
这种具体到某个特性或者bug的问题，最好的寻找答案的方式是在stackoverflow搜索下。比如你这个问题：
感觉你布局不是很合理，既然fix是基于屏幕定位的，那何必要把他放到他的父级中呢比如你这个&div class="wrap"&
&div class="fix"&&/div&
&div class="page"&
&div class="content"&&/div&
&/div&&/div&然后3d位移加到page上，你觉得这样是不是合理点
直接把fixed写在body上就可以了
我也碰到过，如果你仅仅是利用translate3d来开启GPU加速的话，可以使用translateZ代替一下试试
直接写在 BODY里,或者用JS把他放入body里
已有帐号？
无法登录？
社交帐号登录}