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

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>© 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>© 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";

Answer 3

This is a cheap hacky fix, but:
CSS:
#media screen and (max-width: 800px) {
.hide-footer {
display: none;
}
}
jQuery
$('input').focus(function() {
$('footer').addClass('hide-footer');
});
$('input').focusout(function() {
$('footer').removeClass('hide-footer');
});
This adds the class .hide-footer to your footer as soon as you focus on an input tag. In addition, the footer is only hidden when the screen width is less than 800px (you should customize, but this should cover mobile devices).

Answer 4

You can hide the footer when you focus on input filed and show again footer on focus out of input filed using jquery.
$( "#inputID" ).focus(function() {
$("#footer").hide();
});
$( "#inputID" ).focusOut(function() {
$("#footer").show();
});

Answer 5

You can't fix it because there's nothing wrong, your footer is doing exactly what you've told it to do.
Your CSS rule for the footer is telling it to always 'attach' to the bottom of the window, even when the keyboard on a mobile device is visible, the top of the keyboard is now the bottom of the window.
If you want, you can either remove the position:absolute value or just change it to position:fixed

Answer 6

Another solution might be to add event listeners for focusin and focusout events of the input-element. The respective listener callbacks can then implement some logic to show or not to show the footer.