Footer is pushed up when keyboard is open HTML/CSS?
<p>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?</p>
<p><strong>CSS</strong></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#footer {
  width: 100%;
  background-color: #4c66a4;
  color: #fff;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="footer"&gt;
  &lt;p&gt;&amp;copy; 2018 SulmaxCP. All Rights Reserved.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://i.stack.imgur.com/1tMcv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1tMcv.png" alt="Keyboard Closed" /></a></p>
<p><a href="https://i.stack.imgur.com/jR9N3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jR9N3.png" alt="Keyboard Open" /></a></p>