问题

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.

I've this div element:

....
        <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.

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:

<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?

Solution: removed maximum-scale and target-densityDpi and now it works for both IOS and Android. The meta tag now looks like this:

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

回答1:

EDIT: Okay, I found another possible solution. Check your html meta tags for something like this:

<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.

Another possible solution:

If you look in config.xml (probably under the resources directory, you should see a line that says:

<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.

回答2:

There's the culprit in your #footer class bottom:0px; If you give bottom to any element, on appearance of virtual keyboard, those elements move upwards in iOS 7. The workaround is to use top property.

回答3:

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 internet and it worked for me:

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

回答4:

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 number originally. 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.

回答5:

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.

$(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:

//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

-(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

//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.

回答6:

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

回答7:

Main issue in you CSS class property

footer{}

You have set the position "fixed" and z-index.

Please handler position property according to to Iphone.

来源：https://stackoverflow.com/questions/18977540/div-element-wont-stay-at-the-bottom-when-ios-7-virtual-keyboard-is-present

标签

html

ASP.NET

css

ios7

Div element won't stay at the bottom when ios 7 virtual keyboard is present

问题