触摸设备（ipad、iphone）和 CSS 顶层具有 100% 的宽度和高度？答案

【问题标题】：touchdevices (ipad, iphone) and CSS top layer with 100% width and height?触摸设备（ipad、iphone）和 CSS 顶层具有 100% 的宽度和高度？
【发布时间】：2011-05-08 08:55:19
【问题描述】：

大家好，我有一个 div.mapFullscreenContainer

#mapFullscreenContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

当我滚动到底部并单击按钮时，会显示此 div。在普通浏览器中，这工作得很好。覆盖是 100% 宽和 100% 高，位于页面顶部。

但在触控设备上，存在叠加层总是在视口之外的问题。想象一下，使叠加层可见的按钮位于相当长的网页的页脚中。叠加层始终位于页面的最开头，因此用户不会立即看到它。用户必须滚动回顶部才能看到叠加层。

知道如何解决这个问题，让它像在普通浏览器上一样运行。 bottom:0; 而不是 top:0 没有区别。

【问题讨论】：

标签： iphone css ipad overlay

【解决方案1】：

您可以使用 JS 计算页面的总高度并将其应用于此 div

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

【讨论】：

谢谢，但这实际上不是我正在寻找的解决方案。如果我使用 body.height();整个页面都充满了覆盖。但是，我只想拥有带有此叠加层的视口。问题是覆盖层包含一个谷歌地图。如果将整个页面（正文）设置为其高度，则地图的中心再次超出视口。
@mathiregister 请提供样本。