JQuery Mobile Panel中的页面间距问题

Question

当我在面板中添加内容（在此示例中为标题）时，左侧，顶部和右侧似乎有间距。该面板位于数据角色页面内。但是，如果我将面板放在页面之外，那么它将使用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>