weird scroll in jquery mobile data-role page or content

Question

I have a jquery mobile page like following

<div id="main_template_wrapper">
    <div data-role="header" class="header" data-position="fixed">
        <h1>中文</h1>
    </div><!-- /header -->
    <div data-role="content" class="content">
        <a href='#userprofile' data-role="button">userprofile</a>
        <a href='#login' data-role="button">login</a>
        <a href='#tutorial/1/1' data-role="button">tutorial</a>
        <a href='./spec.html' data-role="button">Jasming</a>
    </div><!-- /content -->
    <div data-role="footer" class="footer" data-position="fixed">
    </div><!-- /footer -->
</div>

When I see this page on ios device, there is always a weird scrollbar on the right, where you can scroll a little bit, why and how to fix this.

Answer 1

Ok. after some fix, it seem in index.html viewport, I set height=device-height, which caused this error, device-height is longer than screen it seems, after i removed height, the scrollbar is gone.