Geek asks and answers

Space over fixed header in Android 4+ browser

Any ideas on how to remove the space (on the screen) appears while scrolling? The title has a fixed position, and a space only appears on Androd (tested on Android 4.0.4).

Gap

Part of the code responsible for the header:

HTML:

<div data-role="page" id="settings">
    <div class="holo-action-bar">
        <h1><span>Settings</span></h1>
    </div>
    <div class="content content-inner"></div>
</div>

CSS

.holo-action-bar {
  background-color: #333;
  color: #fff;
  display: block;
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  z-index: 1000;
}

You can also see an example of jQuery mobile docs

UPDATE:

The problem does not occur in iOS (tested on iOS 5+)

+5
source share
4 answers

I found a solution:

This is a CSS issue in the phone book.

body {
   << height : 100%; don't use it >>
   width: 100%;
   margin:0;
   padding:0;
   top: -1px;
}

HardwareAccelaration: true

+1
source

But delete the data-position = "fixed"

create class

<div id="header"><h1>Fixed header!</h1></div>

CSS

#header{
 position:fixed;
 top:0;
}

EDIT *

? p h1

, btw, jquery mobile, , tbh.. , 1px ?

0

, , . java:

mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

android:hardwareAccelerated="true" <application>. , 4.0.1.

- , , / :

mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
0

I have a 1px space above the fixed title in the Android 4 panel when using Intel App Framework 2 with Cordova 3.0.0. With the target version of Android set to 4.3.

The problem was not when I installed the target version of Android in 2.3.3 in previous projects.

In the end, I found that when I set hardwareAccelerated = "false" (in two places) in AndroidManifest.xml, there is no space in 1 px.

0
source

More articles:


All Articles