touchdevices (ipad, iphone) and CSS top layer with 100% width and height?

hey guys, I have a div.mapFullscreenContainer

#mapFullscre开发者_运维技巧enContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.

However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.

Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.

---

you can use JS to count and apply total height of your page to this div

http://jsfiddle.net/seler/FjeyK/