Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid 2.3 + Phonegap fixed positioning is not working
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload