title: How to prevent mobile keyboard from rising footer over the text fields?
body: <p>I am having trouble with my footer. I want the footer to stay at the bottom of the screen, but there is a slight problem. When using mobile browser, some fields get blocked by the footer when opening the keyboard. The footer rises over the keyboard and blocks the field you are typing in. How can I keep my footer at the bottom and prevent it from rising over the keyboard? I want it to stay hidden under the keyboard.</p>
  <p>I am using bootstrap, but I have set the following stuff in my own CSS:</p>
  <pre><code>footer {
   width: 100%;
   position:absolute;
   left:0px;
   bottom:0px;
   height: 40px;
   margin: auto;
   overflow: hidden;
   background:#2E2E2E;
   text-align:center;
   line-height: 15px;
   color: #fff;
  </code></pre>
  <p>}</p>
  <pre><code>&lt;html&gt;
   &lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
    &lt;/div&gt;
    &lt;footer class=&quot;bs-footer&quot; role=&quot;contentinfo&quot;&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>As you can see here. When I am activating the field &quot;Salasana&quot;, the footer rises and blocks the text field.</p>
  <h1>Before opening the keyboard:</h1>
  <p><img src="https://i.imgur.com/nlrVFNm.png" alt="before" /></p>
  <h1>After opening the keyboard:</h1>
  <p><img src="https://i.imgur.com/2vYRTrD.png" alt="after" /></p>