CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsjquery-mobile
Hodaya Shalom
Hodaya Shalom

Reputation: 4417

Cancel scrolling on HTML5

I have a page in HTML5

The page is defined as 100% height, and still have a scroll bar.

At first I thought it was because the Google Map that I have in the page, and then I opened the page in another browser, scroll bar smaller than the first browser,

then I got the idea that it is because of the different Tool Bars.

Is it really because of the Tool bar or is it because of the map, and how to fix it?

Thank you...

My css:

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

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

}

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

My 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>

Upvotes: 1

Views: 193

Answers (2)

Gajotres
Gajotres

Reputation: 57309

If this is not a problem for you take a look at my jQuery solution:

$(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');

Page height - header height - footer height - 4 = content height

I am using - 4 to counter borders. Use only -2 if you have only footer or header. None if you have only map.

For this formula you need a viewpoint meta tag set, because you will get wrong screen sizes.

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

This is a jsFiddle example: http://jsfiddle.net/Gajotres/HKjEF/

Tested in Win Firefox, iPad Safari, Android 4.1 Chrome environments.

Upvotes: 1

Amber
Amber

Reputation: 1249

First of all please share HTML code.

For your question : Yes, it may be because of Tool Bars or some other default margin, padding in the page.

You can remove the scroll-bar by setting height as 98% or 99% which ever fix scrolling issue for you.

Upvotes: 1

Related Questions