1

我有一个 HTML5 页面

该页面被定义为100% height，并且仍然有一个滚动条。

一开始我以为是因为我在页面里有谷歌地图，然后我在另一个浏览器中打开页面，滚动条比第一个浏览器小，

然后我想到这是因为不同的Tool Bars。

真的是工具栏的原因还是地图的原因，如何解决？

谢谢...

我的CSS：

.ui-mobile
{
    height: 99%;
    width: 100%;
}

ui-mobile-viewport.ui-overlay-c
{
    height: 99%;

}

#map_canvas
{
    height: 99%;
    width: 100%;
    position: inherit;
}

我的HTML：

<!DOCTYPE html>
<html class="no-js">
<head>
...
    <title>Main Page</title>
</head>
<body>
    <div id="MainPage" data-role="page">
        <script>
            $("#MainPage").live("pageinit", function () { ... });
        </script>
        <div id="map_canvas">
        </div>

    </div>
</body>
</html>
4

2 回答 2

1

首先请分享HTML代码。

对于您的问题：是的，这可能是因为工具栏或其他一些默认边距，页面中的填充。

您可以通过将高度设置为 98% 或 99% 来移除滚动条，这会为您解决滚动问题。

于 2012-12-24T11:32:37.830 回答
1

如果这对您来说不是问题，请查看我的 jQuery 解决方案：

$(window).bind('resize', function () {
    var screenHeight= 0;
    screenHeight= $('[data-role="page"]').first().height() - $('[data-role="header"]').first().height()- $('[data-role="footer"]').first().height();
    $('#map_canvas').css('height',screenHeight - 4);
}).trigger('resize');

页面高度 - 页眉高度 - 页脚高度 - 4 = 内容高度

我正在使用 - 4 来对抗边界。如果您只有页脚或页眉，则仅使用 -2。如果您只有地图，则没有。

对于这个公式，您需要一个视点元标记集，因为您会得到错误的屏幕尺寸。

<meta name="viewport" content="width=device-width, initial-scale=1" />

这是一个 jsFiddle 示例：http: //jsfiddle.net/Gajotres/HKjEF/

在 Win Firefox、iPad Safari、Android 4.1 Chrome 环境中测试。

于 2012-12-24T15:54:05.330 回答