Problem with footer in mobile sites

Question

Problem with footer in mobile sites

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

5

I recently came across a problem in a footer for a project of mine. The footer in the case should be at the bottom of the page ( bottom: 0; ), so far so good, it gets normal.

The problem is that when I enter the site through my mobile browser, when trying to fill in the inputs of the page registration form, the mobile phone's keyboard appears normal but the footer, instead staying at the bottom of the page ends up above the keyboard.

I know the problem is that I'm using bottom: 0; , but I did not find any way to solve it, and I'd like someone to help me find a solution or a tip to solve it. Thanks!

Follow footer code:

footer {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
}

css posicionamento mobile

asked by anonymous 15.09.2015 / 20:57

4 answers

Change validation behavior on Primefaces components Fade Radial js or canvas

score 0 · Answer 1

Apply absolute%% of position only at higher resolutions using media query:

@media screen and (min-width: 768px) {
  footer {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
  }
}

Another way would be to use JavaScript and compute the footer of the screen, if the height element exceeds the screen size you remove body from absolute .

score 0 · Answer 2

I believe this framework can solve your problem.

In this structure, basically div wrapper causes footer to always be pulled to the bottom of the page, regardless of page content.

DEMO and Source

score 0 · Answer 3

use jquery, solve perfectly

$(document).ready(function () { 
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
    if(window.innerHeight < initialScreenSize){
        $("#suaid").hide();
    }
    else{
        $("#suaid").show();
    }
});
    });

score 0 · Answer 4

In mobile resolution, using @media you can use position Fixed . Does this help you?

footer {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
}

or simply remove position when it's a cell phone.