title: How do I prevent the android keyboard push my container up?
body: <p>So I'm doing a website with a <a href="https://www.youtube.com/watch?v=gLWIYk0Sd38&amp;" rel="nofollow noreferrer">&quot;Modal Popup&quot;</a> login form responsive to mobile first and I have a footer to the end of the modal container. The problem is when I want to write something in both inputs, the keyboard appears and it push the footer up. I want the footer to stay in the position and the keyboard just don't resize my modal container or have interaction with the website.</p>
  <p><a href="https://i.stack.imgur.com/DhOZW.jpg" rel="nofollow noreferrer">This is how it look without showing the keyboard</a></p>
  <p><a href="https://i.stack.imgur.com/9tNBg.jpg" rel="nofollow noreferrer">And this is when it push the footer up.</a></p>
  <p>Here's the code.</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>* {
      margin:0;
      padding:0;
  }
  
  header{
      background-color:red;
      width:100%;
      height:30px;
      display:flex;
      justify-content: center;
      align-items: center;
  }
  
  .to-modal-container{
      background-color:blue;
      width:100%;
      height:200px;
      display:flex;
      justify-content: center;
      align-items: center;
  }
  
  .to-modal{
      background:red;
  }
  
  .bg-modal{
      width: 100%;
      height:100%;
      background-color:rgba(0, 0, 0, .5);
      position:absolute;
      top: 0;
      display:flex;
      justify-content: center;
      align-items: center;
  }
  
  .modal-content{
      width:90%;
      height:50%;
      background-color: white;
      border-radius: 4px;
      text-align: center;
      padding-top: 20px;
      display:flex;
      flex-direction: column;
      justify-content:space-between;
  }
  
  input {
      width:50%;
      display: block;
      margin:15px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;MODAL TESTING&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
      &lt;link rel="stylesheet" type="text/css" href="./style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
      &lt;div&gt;
          &lt;span&gt;LOGO&lt;/span&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="to-modal-container"&gt;
      &lt;div class="to-modal"&gt;
          &lt;span&gt;&lt;a href="#"&gt;CLICK AQUI&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="bg-modal"&gt;
      &lt;div class="modal-content"&gt;
          &lt;span&gt;LOGO&lt;/span&gt;
          &lt;div class="form-container"&gt;
          &lt;form action=""&gt;
              &lt;input type="text" placeholder="Name"&gt;
              &lt;input type="Password" placeholder="Password"&gt;
              &lt;a href="" class="button"&gt;Submit&lt;/a&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="footer-container"&gt;
              &lt;span&gt;THIS IS THE FOOTER&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>