页脚{}

Question

在按下文本框后，当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之前的版本上运行时工作。

左侧是按下文本框之前，右侧是按下文本框之后。

Left side: Before. Right side: After

页脚跳到虚拟键盘上方。

更新

我已经更改了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上运行时搞砸了:) 有什么解决方案吗？

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

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

Answer 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，则会阻止页脚在软键盘上方移动。但是，这也会导致键盘有时掩盖用户正在键入的文本字段。

Answer 2

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

Answer 3

批准的答案有效，但可以搞乱一些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();
        }
    }
}

Answer 4

我有点晚了，但效果很好：

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

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

Answer 5

以下是我们如何解决它：科尔多瓦2.9.0。解决方案1.添加视口元标记确实在某种程度上解决但不完全解决.Hence丢弃它。解决方案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();
    }
}

如果此解决方案适用于您，请告知我们。

Answer 6

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

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

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

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

显示键盘

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

Answer 7

CSS类属性中的主要问题

页脚{}

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

请根据Iphone处理位置属性。

当存在ios 7虚拟键盘时，Div元素不会保持在底部

7 个答案:

页脚{}