title: Div element won't stay at the bottom when ios 7 virtual keyboard is present
body: <p>I'm having a problem with a div element to stick to the bottom of my web app when ios 7 virtual keyboard appears after pressing a textbox.</p>
  
  <p>I've this div element:</p>
  
  <pre><code>....
          &lt;div id="footer" style="text-align:center"&gt;
              &lt;div id="idName"&gt;&lt;img alt="SomeName" src="images/logo.png" /&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>It uses this style</p>
  
  <pre><code>#footer{
  color:#CCC;
  height: 48px;
  
  position:fixed;
  z-index:5;
  bottom:0px;
  width:100%;
  padding-left:2px;
  padding-right:2px;
  padding:0;
  
  border-top:1px solid #444;
  
  background:#222; /* Old browsers */
  background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));  
  background:    -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */    
  background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
  background:      -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
  background:     -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
  background:         linear-gradient(top, #999, #666 2%, #222); /* W3C */
  }
  </code></pre>
  
  <p>And when I press on the textbox, the footer elementer jumps up above the virtual keyboard.
  It used to work when my iDevices was running on versions before ios 7.</p>
  
  <p>On the left side is before pressing the textbox and on the right side is after pressing the textbox.</p>
  
  <p><img src="https://i.stack.imgur.com/hfMca.png" alt="Left side: Before. Right side: After"></p>
  
  <p>The footer jumps above the virtual keyboard.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've changed the meta tag provided by Opossum and now the footer stays at the bottom:</p>
  
  <pre><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;!--&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=0"&gt;--&gt;
  &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  </code></pre>
  
  <p><strong>Extension</strong></p>
  
  <p>This is not a part of the question, but the fix screws things up when running on a Android :)
  Any solution for that?</p>
  
  <p>Solution: removed maximum-scale  and target-densityDpi and now it works for both IOS and Android. The meta tag now looks like this:</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/&gt;
  </code></pre>