jquery - ページ間隔の問題における JQuery Mobile Panel

Question

パネルにコンテンツ (この例ではヘッダー) を追加すると、左、上、右にスペースがあるように見えます。パネルは data-role ページ内にあります。しかし、パネルをページの外側に配置すると、スペースが 100% 使用されます。これが私のコードです：

<section id="mainPage" data-role="page" style="">

    **<section data-role="panel" id="mainPageMenu"  data-position="left" data-dismissible="false" data-display="overlay" style="">
        <header data-role="header" id="Header1" style="">
            <h1>Menu</h1>
            <a href="#mainPageMenu" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c">Close</a>
        </header>
        <div data-role="content" style="">
            <ul data-role="listview">
                <li><a href="#highlightsPage">Highlights</a></li>
                <li><a href="#pressReleasePage">Press Releases</a></li>
                <li><a href="#calendarEventsPage">Calendar Events</a></li>
                <li><a href="#departmentPage">Departments</a></li>
            </ul>
        </div>
    </section>**

    <header data-role="header" id="mainPageHeader">

        <a href="#mainPageMenu" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c">Home</a>
        <h1>Mobile</h1>

    </header>

    <div data-role="content" id="mainPageContent" style="">


    </div>

</section>