1

我正在使用 jQuery mobile 作为界面构建一个网页。我遇到了这个问题：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;
}

你能否解释一下为什么这个列表会打破界限并告诉我如何解决这个问题。提前致谢。

4

0 回答 0