Html 当 ios 7 虚拟键盘存在时，Div 元素不会停留在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18977540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div element won't stay at the bottom when ios 7 virtual keyboard is present
提问by Phu Minh Pham
I'm having a problem with a div element to stick to the bottom of my web app when ios 7 virtual keyboard appears after pressing a textbox.
当按下文本框后出现 ios 7 虚拟键盘时，我遇到了 div 元素粘在我的网络应用程序底部的问题。
I've this div element:
我有这个 div 元素：
....
<div id="footer" style="text-align:center">
<div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
</div>
</form>
</body>
It uses this style
它使用这种风格
#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 */
}
And when I press on the textbox, the footer elementer jumps up above the virtual keyboard. It used to work when my iDevices was running on versions before ios 7.
当我按下文本框时，页脚元素会跳到虚拟键盘上方。当我的 iDevices 在 ios 7 之前的版本上运行时，它曾经可以工作。
On the left side is before pressing the textbox and on the right side is after pressing the textbox.
左侧是按下文本框之前，右侧是按下文本框之后。
The footer jumps above the virtual keyboard.
页脚跳到虚拟键盘上方。
UPDATE:
更新：
I've changed the meta tag provided by Opossum and now the footer stays at the bottom:
我已经更改了 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" />
Extension
延期
This is not a part of the question, but the fix screws things up when running on a Android :) Any solution for that?
这不是问题的一部分，但是在 Android 上运行时修复会搞砸:) 有什么解决方案吗？
Solution: removed maximum-scale and target-densityDpi and now it works for both IOS and Android. The meta tag now looks like this:
解决方案：移除了maximum-scale 和target-densityDpi，现在它适用于IOS 和Android。元标记现在看起来像这样：
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
回答by Opossum
EDIT: Okay, I found another possible solution. Check your html meta tags for something like this:
编辑：好的，我找到了另一个可能的解决方案。检查您的 html 元标记是否是这样的：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
用这个替换它：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
This fixed the problem for me. I should note that my app is using Cordova though.
这为我解决了问题。我应该注意到我的应用程序使用的是 Cordova。
Another possible solution:
另一种可能的解决方案：
If you look in config.xml (probably under the resources directory, you should see a line that says:
如果您查看 config.xml（可能在资源目录下，您应该看到一行内容：
<preference name="KeyboardShrinksView" value="false" />
If you set that to true, it keeps footers from moving above the soft keyboard. However, this also causes the keyboard to sometimes cover up the text field that the user is typing in.
如果您将其设置为 true，它会阻止页脚在软键盘上方移动。但是，这也会导致键盘有时会覆盖用户正在输入的文本字段。
回答by Tanveer Shaikh
There's the culprit in your #footerclass
bottom:0px;If you give bottomto any element, on appearance of virtual keyboard, those elements move upwards in iOS 7.
The workaround is to use topproperty.
还有的罪魁祸首在你的#footer类
bottom:0px;如果你给bottom的任何元素，虚拟键盘的外观，这些元素向上移动在iOS的7解决方法是使用top属性。
回答by Jaroslav
Approved answer works, but can mess with some CSS, so I have to use something else. It's not my fix, but found it on the internetand it worked for me:
批准的答案有效，但可能会弄乱一些 CSS，所以我必须使用其他东西。这不是我的修复方法，而是在互联网上找到的并且对我有用：
HTML:
HTML：
<body onResize="onResize();">
JavaScript:
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();
}
}
}
回答by user3718546
I'm a bit late but this works well:
我有点晚了，但这很有效：
var footer = $(".footer");
footer.css({ "top": footer.position().top, "bottom": "auto"});
This assumes a fixed or absolutely positioned element that has bottom: some numberoriginally. Add this to wherever it is appropriate in your javascript scripts (probably on a function that is called when the page loads). This uses jQuery but it easily translates into javascript. This basically forces the footer to stay on the bottom related by the 'top' value instead of the ;bottom' value.
这假设一个固定或绝对定位的元素具有底部：最初是一些数字。将此添加到您的 javascript 脚本中的任何适当位置（可能在页面加载时调用的函数上）。这使用 jQuery，但它很容易转换为 javascript。这基本上强制页脚停留在与 'top' 值而不是 ;bottom' 值相关的底部。
回答by user3414060
Here is how we have resolved it: cordova 2.9.0. Solution 1. adding the viewport meta tag did resolve to some extent but not completely.Hence dropped it. Solution 2.
这是我们解决它的方法：cordova 2.9.0。解决方案 1. 添加视口元标记确实在一定程度上解决了问题，但没有完全解决。因此将其删除。解决方案 2。
$(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();
}
}
});
where #footer is the id of the div whihc holds footer. This will show the toolbar for a flash of a second and the hide it, to avoid this flicker we have added some code in the native, 1.Register for the keyboardshow event in your MainViewcontroller.m add the following in the init functioon:
其中#footer 是包含页脚的 div 的 ID。这将显示一秒钟的工具栏并隐藏它，为了避免这种闪烁，我们在本机中添加了一些代码，1.在 MainViewcontroller.m 中注册键盘显示事件，在 init 函数中添加以下内容：
//fix for ios7 footer is scrolled up when the keyboard popsup.
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(keyboardWillShow:)
name:UIKeyboardWillShowNotification
object:nil];
2.add the following function
2.添加以下功能
-(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.In the js file add the function
3.在js文件中添加函数
//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();
}
}
Let us know if this solution works for u.
让我们知道此解决方案是否适合您。
回答by kavinhuh
In my case I used to capture the event when entering into input text fields events and hiding the bottom bar using
在我的情况下，我曾经在进入输入文本字段事件并使用隐藏底部栏时捕获事件
if($(event.target).hasClass("inputtextfield")){
$('.bottom_bar').hide();}
and capture the event when the keyboard is closed and show back the keyboard using
并在键盘关闭时捕获事件并使用
document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});
回答by Chander Prakash
Main issue in you CSS class property
您的 CSS 类属性中的主要问题
footer{}
页脚{}
You have set the position "fixed" and z-index.
您已将位置设置为“固定”和 z-index。
Please handler position property according to to Iphone.
请根据 Iphone 处理位置属性。
