title: Preventing Android Keyboard from pushing layout
body: <p>I created a form using bootstrap, css, and html.</p>
  
  <p>However when I click on the text area on an android phone(that is, when it comes into focus), the bottom half of the textarea changes color. </p>
  
  <p>I don't understand why its turning white.
  By the way: It works fine on a PC.</p>
  
  <p><img src="https://i.stack.imgur.com/VzwmS.jpg" alt="Normal">
  <img src="https://i.stack.imgur.com/ojOOP.jpg" alt="Bottom half is white"></p>
  
  <p>My css Code:</p>
  
  <pre><code>    .container-fluid{
         background-color: #EF4247;
       border-color: #EF4247;
       }
  form {
              height: 100%;
          width: 100%;
          padding: 50;
             background-color: #EF4247;
       border-color: #EF4247;
      text-align: center;
  
      margin: 0;
      }
  
  
  h1{
  text-align:center;
  }
  
  textarea{ width:200px;
  }
  
  .form-horizontal .control-group {
    margin-bottom: 20px;
  }
  </code></pre>
  
  <p>My HTML code:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  
  
       &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container-fluid"&gt;
  &lt;h1&gt;SEND ME SOME MAIL&lt;/h1&gt;
  &lt;form class="form-horizontal" action="mail.php" method="post" &gt;
    &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
      &lt;div class="controls"&gt;
        &lt;input type="text" id="inputEmail" placeholder="Email" name="subject"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="textarea"&gt;Text Area&lt;/label&gt;
    &lt;div class="controls"&gt;                     
      &lt;textarea id="textarea"  rows="10" name="message" placeholder="Enter your message here:"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
  
  &lt;/form&gt;
  
  
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="fitter-happier-text.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>