Question

我在HTML5中有一个页面

页面定义为 100％高度，并且仍然有滚动条。

起初我以为是因为我在页面中有Google Map，然后我在另一个浏览器中打开页面，滚动条比第一个浏览器小，

然后我认为这是因为工具栏不同。

真的是因为工具栏还是因为地图，以及如何修复它？

谢谢...

我的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>

Answer 1

首先请分享HTML代码。

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

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

Answer 2

如果这不是问题，请查看我的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环境中测试。

取消在HTML5上滚动

2 个答案: