iPad Safari 100% height issue

问题:

I have a modal div on my page, which grays out the background. If I set the height of overlay div to 100%, it works fine on IE (desktop), but on iPad Safari, the complete height is not grayed out. What exactly is the issue? Is it to do with fixed position/viewport? Please help. Below is the CSS for the same;

#TB_overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.TB_overlayBG {
    background-color: #000000;
    opacity: 0.4;
}

回答1:

Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.

回答2:

The device height and width need to be set, you can use iPad specific styles to achieve this, so that it doesn't break your other browsers.

Reference: http://css-tricks.com/snippets/css/ipad-specific-css/

Without seeing the it, its hard to say exactly what the problem is but try using the above css to apply specific css to iPad Safari.

回答3:

Your issues:

1. Most mobile browsers ignore position:fixed

2. Window sizes and viewport sizes are handled differently, so the position:absolute;... trick doesn't work also -- you have to dynamically size your div in script by reading the size of the viewport, or make it large enough to cover all potential page sizes