【问题标题】：Div element won't stay at the bottom when ios 7 virtual keyboard is present存在 ios 7 虚拟键盘时，div 元素不会停留在底部
【发布时间】：2013-09-29 10:17:42
【问题描述】：

当按下文本框后出现 ios 7 虚拟键盘时，我遇到了一个 div 元素粘在我的网络应用程序底部的问题。

我有这个 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" />

扩展

这不是问题的一部分，但在 Android 上运行时修复会搞砸:) 有什么解决办法吗？

解决方案：删除了 maximum-scale 和 target-densityDpi，现在它适用于 IOS 和 Android。元标记现在看起来像这样：

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

【问题讨论】：

将元标记设置为 height=device-height 有两个问题。 1）状态栏需要20px。如果您从应用程序的 web 视图中提供 20px，您将拥有一个跨越屏幕下方 20px 的网页。含义：无论页面上的信息多么少，您总会得到一个滚动条。 2）当键盘向上时，您可以通过将 548px（iPhone 5 及更新版本）滚动到底部来到达固定元素。这不是过去的样子。

标签： html asp.net css ios7

【解决方案1】：

编辑：好的，我找到了另一种可能的解决方案。检查您的 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，它会阻止页脚在软键盘上方移动。但是，这也会导致键盘有时会掩盖用户正在输入的文本字段。

【讨论】：

也许我在这里迷失了方向，但此修复程序适用于 iOS 应用程序。当我阅读时，发帖人的网页上有他的应用程序？
小心将 height=device-height 添加到元标记 - 它与各种 css 和 javascript 高度/定位规则相混淆。话虽如此，它似乎是解决屏幕键盘问题的唯一解决方案。我正在尝试找出一种可以通过编程方式添加“height=device-height”设置的方法，即仅当 iOS 键盘出现时。
所以@Opossum height=device-height 确实可以防止页脚“跳”到虚拟键盘的顶部，但它引入了一个新问题（至少对我来说） - 如果你关闭键盘按“完成”一切正常但是如果您通过模糊输入元素关闭键盘（即通过单击输入之外的屏幕上的其他位置），页脚然后跳起来并卡在虚拟键盘顶部的位置过去是 - 让它回到底部的唯一方法是滚动页面。其他人可以重现这个和/或修复吗？
所以我想我解决了我的问题，它需要： $('body').css('height', '+=9999').css('height', '-=9999' );输入模糊 - 这似乎触发了滚动条，然后固定元素回到它们应该在的位置。请注意，我已经看到了一个类似的修复，只有 '1' 而不是 '9999' 但这对我不起作用 - 在这种情况下，我认为它需要足以强制滚动条可见。
我遇到了同样的问题，当按下输入框外的某个地方时，栏卡住了，当按下完成按钮时，一切都按预期工作。我用 window.scrollBy(0, 0);更新视图。我还必须使用 350 毫秒的超时时间让键盘消失。

【解决方案2】：

批准的答案有效，但可能会弄乱一些 CSS，所以我必须使用其他东西。这不是我的解决方法，但在 internet 上找到了它，它对我有用：

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();
        }
    }
}

【讨论】：

对于特定的 iOS 修复，您真的不应该使用内联 javascript，尤其是当它是一个调整大小事件时。在运行 resize 事件之前检查 iOS 将大大提高性能$(document).ready(function () { var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7); if (ios7){ $(window).on("resize",function(){ //your iOS fix here }); } });

【解决方案3】：

在我的情况下，我使用在输入输入文本字段事件并隐藏底栏时捕获事件使用

if($(event.target).hasClass("inputtextfield")){

        $('.bottom_bar').hide();}

并在键盘关闭时捕获事件并使用显示键盘

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

【讨论】：

【解决方案4】：

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

【讨论】：

只是一个补充，它也发生在我的 android jelly bean 中。但我看不到 top 属性如何解决我的布局，因为该元素意味着卡在底部？请指教

【解决方案5】：

以下是我们解决此问题的方法：科尔多瓦 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();
                   }
              }
});

#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.添加如下函数

-(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文件中添加函数

//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();
    }
}

让我们知道此解决方案是否适合您。

【讨论】：

【解决方案6】：

我有点晚了，但这很好用：

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

这假定一个固定的或绝对定位的元素具有底部：一些数字。将此添加到 javascript 脚本中适当的位置（可能在页面加载时调用的函数上）。这使用 jQuery，但它很容易转换为 javascript。这基本上迫使页脚停留在与“顶部”值相关的底部，而不是“底部”值。

【讨论】：

这很好地解决了我的需求。但是有一个问题。如果页面是可滚动的，页脚不会出现在正确的位置。特别是在点击字段时页面自动滚动的情况

【解决方案7】：

CSS 类属性的主要问题

页脚{}

您已将位置设置为“固定”和 z-index。

请根据Iphone处理位置属性。

【讨论】：