Footer is pushed up when keyboard is open HTML/CSS?

Question

so all i'm trying to do here is add a simple footer to my site which works perfectly when open on desktop but when on tablet or mobile whenever the keyboard is open such as they login the footer moves up the page to just above the keyboard. Is there a method of fixing this, any ideas?

CSS

#footer {
  width: 100%;
  background-color: #4c66a4;
  color: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}

<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>

Answer 1

Try using a wrapper inside the body tag.

html,body{
  height:100%;
}
.wrapper {
    min-height: 100%;
    position: relative;
  padding-bottom:90px; /* footer's height */
}
#footer {
  width: 100%;
  background-color: #4c66a4;
  color: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}

<div class="wrapper">
<main>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis necessitatibus earum tenetur itaque ducimus atque nam vitae ab non quasi natus quam, cum hic quod possimus quibusdam inventore minima temporibus.</div>
  <div>Optio inventore delectus quas rerum mollitia eum, repellendus voluptatum! Quos, quas nobis delectus, ipsa tempore reiciendis dolore numquam sequi tempora, nostrum in mollitia laboriosam odio labore voluptatem sint. Similique, aliquam.</div>
  <div>Sapiente quisquam vitae alias in nesciunt numquam id, distinctio! Doloribus error mollitia, optio debitis ratione quaerat maiores odio nostrum autem commodi tempora magnam, quos necessitatibus nobis aperiam consequuntur perspiciatis deserunt.</div>
  <div>Hic facere nam aliquam tenetur officiis, ratione, sunt aliquid perspiciatis distinctio laborum perferendis nisi ullam omnis incidunt, quasi illo corrupti, dolores eius vero ipsum tempore. Tempora consequatur necessitatibus, saepe assumenda.</div>
  <div>Eveniet, odit deleniti neque voluptates soluta architecto, quae aspernatur aut minima rerum itaque nobis distinctio ex culpa! Dolore sit vel mollitia aspernatur distinctio voluptatibus! Iste perspiciatis, aliquid a doloribus et.</div>
  <div>Molestias, ducimus! Magni doloribus fugiat praesentium dolore minus perferendis, reprehenderit voluptatibus fuga, rerum quam eveniet, odit ut eaque, repellat provident aperiam repudiandae. Quos porro eveniet, dignissimos non quibusdam provident eligendi!</div>
  <div>Ducimus unde ea iste alias fugiat debitis natus illo eligendi! Nisi dolor esse totam optio, tenetur distinctio, sequi inventore eaque iure earum suscipit quam ipsam qui quae molestias id expedita!</div>
  <div>Veritatis delectus, in laudantium. Excepturi, deserunt! Ullam voluptatem aliquid doloribus ab, officia veniam maiores magnam maxime. Vero esse non dicta autem, aliquam eos dolore harum sed incidunt architecto placeat eaque!</div>
  <div>Hic veniam porro autem quia, commodi provident sunt, at tempore libero, consequuntur, accusamus. Vero illo molestias nam, velit hic iure, a sequi, explicabo ipsum voluptates numquam modi dolorum rem culpa!</div>
  <div>Iusto a cum nihil eos atque, impedit, debitis quis dolor consectetur ratione ipsam nisi recusandae temporibus possimus. Non, natus a, consequuntur provident facilis nemo assumenda dolorum vitae, eligendi et harum.</div>
</main>
<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>
</div>

The thing is that footer relating his position from body tag and when keyboard appears body's height changes and footer get on keyboard.

Answer 2

In this type of situation, unfortunately, CSS seems to not have a fix. So you must use javascript to first calculate the height of the window in pixels and then set the css property. You could do it in one line! But I did it in two here:

// PUSH FOOTER TO BOTTOM
var innerScreenHeight = window.innerHeight;
document.querySelector("#footer").style.top = innerScreenHeight + "px";