Problem with footer on mobile sites

Question

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

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

I know the problem is that I’m wearing the bottom: 0;, but I couldn’t find any way to fix it, and I was hoping that someone could help me find a solution or tip to fix it. Thanks!

Follows code from the footer:

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

Answer 1

Apply to footer absolute 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 calculate the height of the screen, if the element body exceed the screen size you remove the absolute of footer.

Answer 2

I create an example using flexbox. Its already compatible with Most of the browsers as you can see in the can this link:

can I use - flexbox css

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

section, header, footer {
  margin: 0;
  padding: 0.5em 1em;
  box-sizing: border-box;
  width: 100%;
}

section {
  overflow: auto;
  flex-grow: 1;
}

header, footer {
  flex-grow: 1;
  background: #f0f0f0;
}

h1, p {
  margin: 0;
}

<div class="main-container">
  <header>
    <h1>menu</h1>
  </header>
  <section class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt accusamus aperiam debitis maiores, corporis quae quis? Adipisci explicabo, suscipit. Doloremque at sequi recusandae blanditiis nihil velit harum, voluptatibus, pariatur fugiat.</p>
    <p>Facere quibusdam officiis suscipit ipsam non quisquam ipsum quae, animi doloribus soluta maiores ullam numquam odit perferendis molestiae mollitia itaque repellendus, vel saepe necessitatibus? Quam nihil cupiditate temporibus dolores exercitationem.</p>
    <p>Ex sed odit, consequuntur quis maxime adipisci, non dolores natus culpa aliquid incidunt. Quo perspiciatis adipisci, veritatis ipsa odio odit alias et a. Nostrum est, quae, nobis quaerat reprehenderit voluptate.</p>
    <p>Rem corporis cupiditate libero rerum similique deleniti error, dolores, harum earum quos! Perspiciatis consectetur enim cupiditate perferendis at itaque, maxime cum, quisquam nam sed iusto sint alias, natus repellendus. Quod.</p>
    <p>Deleniti maiores ipsa, nam enim assumenda ad voluptates. Ratione error pariatur sit doloremque, omnis placeat incidunt quasi, hic soluta quos ea vitae rerum dolores fugiat in natus, reiciendis, beatae consequuntur?</p>
    <p>A possimus obcaecati velit iure. Aliquam rerum tenetur nobis eveniet reiciendis delectus impedit debitis soluta cum, animi atque sapiente ex quidem sunt nam laboriosam provident nemo, excepturi quis dignissimos fuga.</p>
    <p>Id cupiditate, accusantium repellendus repellat aut eum illo recusandae delectus neque impedit autem animi, sit, inventore possimus unde rerum maiores cum molestias. Odit suscipit asperiores aut cum molestias libero deserunt!</p>
    <p>Ipsa ipsam pariatur provident, harum ratione quibusdam veniam tempora accusamus esse eligendi maxime adipisci, officiis optio veritatis hic nemo voluptates. Voluptate aspernatur in illum quisquam reprehenderit reiciendis maiores cumque nesciunt.</p>
    <p>Corporis quidem dolores ipsum deserunt incidunt voluptatibus animi a perferendis adipisci, culpa possimus ratione natus earum molestiae consectetur odio nostrum accusantium repellat quas quod. Corrupti exercitationem consequuntur facere dignissimos vel.</p>
    <p>Reprehenderit voluptatum veritatis eos non, quaerat dolorem excepturi adipisci, nobis, possimus amet obcaecati mollitia repellendus architecto saepe! Qui voluptas, in! Sunt, temporibus, quidem. Vel ratione, quis consequatur maiores sapiente in?</p>
    <p>Voluptas dolores dolor ex cumque consequuntur commodi, dicta asperiores omnis facilis cupiditate saepe minus minima tempora iste magni enim eveniet at, recusandae similique expedita, ratione praesentium assumenda? Voluptatem, reiciendis, nisi.</p>
    <p>Beatae eligendi repellat, molestiae dolores esse consequuntur dignissimos sapiente, qui, amet placeat aut provident porro, vero laboriosam. Sunt animi rerum labore repellat consequuntur, delectus porro eveniet. Commodi quasi, assumenda omnis!</p>
    <p>Delectus, ab sit debitis mollitia, modi omnis repudiandae, ex ducimus nemo neque possimus. Officia dolore quasi sequi nobis accusamus, beatae quidem ut officiis consequuntur similique excepturi voluptate voluptatem dolorem pariatur.</p>
    <p>Possimus repellat et itaque velit accusantium, nihil sequi sed eveniet iusto ipsum quo, enim odio quia. Magnam tempora, illo, odit rem esse accusantium necessitatibus earum veritatis in perferendis quas cumque.</p>
    <p>Rem soluta totam vitae, earum dicta, nam tempora nihil facilis numquam eveniet. Quia odit cupiditate error. Autem tempore libero consequatur, iusto consequuntur, officiis, commodi, incidunt aliquid repellendus quas reprehenderit doloremque.</p>
    <p>Explicabo nisi omnis cupiditate, voluptatibus eius ratione labore totam repudiandae! Provident iusto alias, quae quod odit perferendis! Quod officiis nesciunt minus omnis commodi vitae, assumenda quos ut velit earum error.</p>
    <p>Voluptate cum adipisci architecto odit est sint aliquam suscipit consequatur inventore rerum nesciunt autem eius reprehenderit magni aut, delectus quas quod nostrum officiis laboriosam assumenda quaerat voluptas. Atque et, libero?</p>
    <p>Magnam, voluptatibus sequi eius impedit, ut quo veniam animi harum aperiam fuga, quod ipsam recusandae nam possimus. Enim perferendis perspiciatis officiis doloribus, labore quasi odit, voluptates reprehenderit rerum, atque amet.</p>
    <p>Explicabo veritatis fuga veniam sequi quia similique quod ducimus, quisquam impedit dolorem ullam. Officia aspernatur nulla dolor laudantium provident illo, obcaecati voluptates fugit sapiente ab recusandae ducimus, repellat quibusdam praesentium.</p>
    <p>Suscipit dicta consequatur harum, commodi debitis ad est amet? Nobis praesentium recusandae temporibus fugiat consequuntur nemo neque assumenda hic laborum ullam, quidem tempore cumque quae ex debitis, reprehenderit aliquam quia.</p>
  </section>
  <footer>
    <p>&copy; all rights reserved.</p>
  </footer>  
</div>

Answer 3

I believe that this structure can solve your problem.

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

DEMO and Source

Answer 4

In mobile resolution, using @media you can use the position Fixed. this helps you ?

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

or simply remove the position when mobile.

Answer 5

uses jquery, solves perfectly

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