title: Android 2.3 + Phonegap fixed positioning is not working
body: <p>On my Phonegap app i'm trying to make out a fixed footer and header, that actually in Android 4.0 works great. But on Android 2.3 even if it looks okay, when I start to scroll the header and footer doesen't stay fixed at all, going along with the scrolling.</p>
  
  <p>The relevant code follows below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid no-padding"&gt;
  &lt;div id="header"&gt;
  
  &lt;/div&gt;  
  &lt;div class="wrapper"&gt;
      &lt;div id="main-content"&gt;&lt;/div&gt;
      &lt;div id="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer" class="main-footer"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>html,body,.container-fluid {
      height: 100%;
      font-family: Helvetica !important;
  }
  
  #wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: -20px; /* the bottom margin is the negative value of the footer's height */
      overflow: scroll;
  }
  
  #footer, #push {
      height: 20px; /* .push must be the same height as .footer */
      width: 100%;
  }
  
  #footer {
      position: fixed;
      z-index: 10; /* Defect #9 */
      margin: 0;
      bottom:0px;
  }
  
  #header {
      position: fixed;
      z-index: 5;
      height: 40px;
      background-color: #FFFFFF;
      width: 100%;
      top: 0px !important;
  }
  
  #main-content {
      margin-top: 45px;
  }
  
  .main-footer {
      background-color: #cf2129;
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>If it is relevant, I'm not using jQuery Mobile (that most part of the awnsers I found relate to), but Twitter Bootstrap instead.</p>
  
  <p>Any guidance is welcome</p>