why the page scroll in jquery mobile?

Question

can you please tell me why my page is scroll .I make a demo in which I add come element .But my page scroll .I also add height make it important but not work for me.

here is fiddle. http://jsfiddle.net/nVgLM/6/ How to restrict the scrolling .

<div data-role="page" style="height: 100%" >

        <header data-role="header" data-position="fixed">
            <h1>Stacker</h1>
            <div data-role="navbar" data-iconpos="left">
                <ul>
                    <li><a href="javascript:home()" data-role="button"
                        data-icon="home" data-theme="b" data-inline="true">Home</a></li>
                    <li><a href="javascript:saveTestSuite()" data-role="button"
                        data-theme="b" data-inline="true">Save JSON</a></li>
                    <li><a href="javascript:loadScriptFile()" data-role="button"
                        data-theme="b" data-inline="true">Load Script</a></li>
                </ul>
            </div>

            <div class="headerTrash" id="headerTrash">Drop Here To Remove
                command</div>
        </header>


    </div>

Answer 1

you should change the fixed position.

From:

<div data-role='header' data-position='fixed'>

To:

<div data-role='header'>

This should fix the scrolling right away.