CSS iPad Safari 100% 高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5729525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad Safari 100% height issue
提问by testndtv
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;
我的页面上有一个模态 div，它使背景变灰。如果我将覆盖 div 的高度设置为 100%，它在 IE（桌面）上运行良好，但在 iPad Safari 上，完整高度不会变灰。究竟是什么问题？与固定位置/视口有关吗？请帮忙。下面是相同的 CSS；
#TB_overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.TB_overlayBG {
background-color: #000000;
opacity: 0.4;
}
回答by Naveed Ahmad
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 bodytag and change its displayto blockwhenever 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.
您可以将其放在底部即body标记之前，并在您想要将背景变灰时将其更改display为block。显然，无论你想在它上面显示什么，都必须有一个更大的z-index. 希望这可以帮助。如果你不明白，请告诉我。
回答by Dave Harding
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.
需要设置设备的高度和宽度，您可以使用 iPad 特定的样式来实现这一点，这样它就不会破坏您的其他浏览器。
Reference: http://css-tricks.com/snippets/css/ipad-specific-css/
参考：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.
没有看到它，很难确切地说出问题是什么，但尝试使用上面的 css 将特定的 css 应用到 iPad Safari。
回答by Stephen Chung
Your issues:
您的问题：
Most mobile browsers ignore
position:fixedWindow sizes and viewport sizes are handled differently, so the
position:absolute;...trick doesn't work also -- you have to dynamically size yourdivin script by reading the size of the viewport, or make it large enough to cover all potential page sizes
大多数移动浏览器忽略
position:fixed窗口大小和视口大小的处理方式不同，所以这个
position:absolute;...技巧也不起作用——您必须div通过读取视口的大小来动态调整脚本的大小，或者使其足够大以覆盖所有潜在的页面大小
