当ios 7虚拟键盘存在时,Div元素不会停留在底部

我有一个div元素的问题,坚持我的web应用程序的底部,当按下一个文本框后出现ios 7虚拟键盘。

我有这个div元素:

.... <div id="footer" style="text-align:center"> <div id="idName"><img alt="SomeName" src="images/logo.png" /></div> </div> </form> </body> 

它使用这种风格

 #footer{ color:#CCC; height: 48px; position:fixed; z-index:5; bottom:0px; width:100%; padding-left:2px; padding-right:2px; padding:0; border-top:1px solid #444; background:#222; /* Old browsers */ background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */ background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */ background: linear-gradient(top, #999, #666 2%, #222); /* W3C */ } 

当我按下文本框时,页脚的播放器跳到虚拟键盘的上方。 它曾经工作,当我的iDevices在ios 7之前的版本上运行。

左边是按下文本框,右边是按下文本框。

左边:之前。右侧:之后

页脚跳到虚拟键盘上方。

更新:

我已经改变了Opossum提供的元标记,现在页脚停留在底部:

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">--> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

延期

这不是问题的一部分,但解决scheme在Android上运行的时候会把事情搞砸了:)任何解决scheme?

解决scheme:删除最大规模和目标密度Dpi,现在它适用于IOS和Android。 meta标签现在看起来像这样:

 <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> 

编辑 :好的,我find了另一种可能的解决scheme。 检查你的HTML元标签是这样的:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 

用下面的代替它:

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> 

这为我解决了这个问题。 我应该注意到我的应用程序正在使用Cordova。

另一个可能的解

如果你查看config.xml(可能在资源目录下,你应该看到一行说:

 <preference name="KeyboardShrinksView" value="false" /> 

如果将其设置为true,则会阻止页脚在软键盘上方移动。 但是,这也会导致键盘有时会掩盖用户input的文本字段。

#footer类的bottom:0px;有罪魁祸首bottom:0px; 如果你给bottom的任何元素,在虚拟键盘的外观上,这些元素在iOS 7中向上移动。解决方法是使用top属性。

我有点迟了,但是这个效果很好:

 var footer = $(".footer"); footer.css({ "top": footer.position().top, "bottom": "auto"}); 

这假设一个固定的或绝对定位的元素,其底部有一些数字 。 把它添加到你的javascript脚本中的任何适当的地方(可能是在页面加载时调用的函数)。 这使用jQuery,但很容易翻译成JavaScript。 这基本上强制页脚停留在“顶部”值而不是“底部”值的底部。

批准答案的作品,但可以惹一些CSS,所以我不得不使用别的东西。 这不是我的修复,但在互联网上find它,它为我工作:

HTML:

 <body onResize="onResize();"> 

JavaScript的:

 function onResize(){ var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7); if (ios7){ var height = $('body').height(); if (height < 350){ // adjust this height value conforms to your layout $('.myBottomMenu').hide(); } else { $('.myBottomMenu').show(); } } } 

以下是我们如何解决它:cordova2.9.0。 解决scheme1.添加视口元标记确实在一定程度上解决,但不完全。因此放弃它。 解决scheme2。

 $(document).on('focus','input, select, textarea',function() { if(OSName=== 'iOS' && ver[0] === 7){ if($(this).attr('readonly')===undefined){ $('#footer').hide() } } }); $(document).on('blur','input, select, textarea',function(){ if(OSName=== 'iOS' && ver[0] === 7){ if($(this).attr('readonly')===undefined){ $('#footer').show(); } } }); 

其中#footer是div的id,它包含页脚。 这将显示工具栏一秒钟的闪光,并隐藏它,为了避免这种闪烁,我们已经在本地添加了一些代码,1.您的MainViewcontroller.m中的keyboardshow事件的注册在init函数中添加以下内容:

 //fix for ios7 footer is scrolled up when the keyboard popsup. [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; 

2.添加以下function

 -(void)keyboardWillShow:(NSNotification*)notification{ //call the javascript to hide the footer. //fix for ios7 footer is scrolled along wiht the content when the keyboard comesup. if (IsAtLeastiOSVersion(@"7.0")){ [self.webView stringByEvaluatingJavaScriptFromString:@"()"]; } } 

3.在js文件中添加该function

 //Fix for footer is misalligned when the virtual keyboard pops up ios7 //check for device is iPhone and os version is 7 function hideFooter(){ if(OSName=== 'iOS' && ver[0] === 7){ if($(this).attr('readonly')===undefined) $('#footer').hide(); } } 

让我们知道这个解决scheme是否适合你。

在我的情况下,我用来捕捉事件进入input文本字段事件和隐藏底部栏使用

 if($(event.target).hasClass("inputtextfield")){ $('.bottom_bar').hide();} 

并在键盘closures时捕捉事件并使用键盘显示返回键盘

 document.addEventListener('focusout', function(e) { $('.bottom_bar').show();}); 

主要问题在你的CSS类属性

页脚{}

你已经设置了“fixed”和z-index的位置。

请根据Iphone处理位置属性。