javascript - JQueryモバイルリストビューアイテムは境界の外に出ますか?

Question

jQuery モバイルをインターフェイスとして使用して Web ページを作成しています。私はこの問題に遭遇しました: listview ul は、私が projectlisting id に設定したスタイルに従わず、境界から外れます。

ページの最後にあるスクリプトは、コンテンツ div をフルスクリーンに拡張するためだけのものです。

これは私のhtmlコードです

<div class="content" data-role="content">
    <div id="projectlisting">
        <div data-role="header" data-theme="e">
            <h5>Project list</h5>
        </div>
        <div id="wrapper_projectlist">
            <ul id="projectlist" data-role="listview" data-filter="true" data-split-theme="c">
                <li>
                    <a href="#" data-value="1" data-name="name" class="project-action">Project 1</a>
                    <a href="#" data-value="1" data-name="name" class="project-action"></a>
                </li>
            </ul>           
        </div>
    </div>

    <div id="projectperson">
    </div>

    <div id="personlisting_assign">
    </div>
</div>
<script type="text/javascript">
    var selectedProjectId = Number.NaN;
    var selectedPersonId = Number.NaN;

    function setDimensionsForProjectPerson() {
        var h = $(window).height() - $(".mainheader").outerHeight() - $(".mainfooter").outerHeight();
        $(".content").css("height", h);
    }

    $(document).ready(function() {
        setDimensionsForProjectPerson();
        $(window).resize(setDimensionsForProjectPerson);
        window.onorientationchange = setDimensionsForProjectPerson;
    }); 
</script>

これは私のcssコードです：

#projectlisting, #projectperson, #personlisting_assign {
    outline: 1px solid grey;
    float: left;
    height: 100%;
    width: 33%;
}

/* used where the project list is displayed, under #projectlisting div */
#wrapper_projectlist {
    position: relative;
    width: 100%;
    z-index: 1;
}

リストが境界を破る理由を説明し、問題を解決する方法を教えてください. 前もって感謝します。