Search code examples
androidcsspositionfixed

CSS fixed position div not clickable in Android

I have a fixed positioned footer containing buttons as follows: 

#footer {
    position: fixed;
    bottom:0;
    width: 100%;
    height: 40px;
    background: #97d700;    
    -webkit-backface-visibility: hidden;
}

#btn_footer_01 {
    position: absolute;
    top: 20%;
    margin-left: 5.13%; 
    width: auto;
    height:auto;
    z-index: 9000000;
    -webkit-backface-visibility: hidden;
}

We would like the footer to stick at the bottom of the viewport, and would like to be able to click on the btn_footer_01 div. However, in Android (target sdk is 17)the onClick() event of the button is not working. It works fine in other browsers like chrome.

What would be a workaround for this? Any help will be greatly appreciated. Thank you.

Solution

  • I decided not to use fixed positioning to be able to address a wide variety of devices including the ones with Android 4.2.2. So, I used absolute positioning: 

    html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

    (There is a good article about this topic at: http://mystrd.at/modern-clean-css-sticky-footer/)