当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处理位置属性。
