0

我正在尝试将布局与jquery-ui-layout放在一起，但无法克服高度问题。

这是HTML代码：

<body>
<div id="wrapper">
    <div id="header">
        <a class="logo" href="/">
            <img src="/media/bdo.png" width="154" height="38"/>
        </a>
        <ul class="top-menu">
            <li><a href="/">report fill out</a></li>
            <li><a href="/reports_browser/">browse reports</a></li>
        </ul>
        <div class="user">
            hi there
            </div>
    </div>
    <div id="content">

    <div class="ui-layout-west" id="consultants">west</div>
    <div class="ui-layout-center" id="contacts">center</div>
    <div class="ui-layout-east" id="details">east</div>

    </div>
</div>
<div id="footer">
    <ul class="links">
        <li><a href="#">help</a></li>
        <li><a href="#">report an issue</a></li>
    </ul>
</div>
</body>

我对所有页面都使用了styles.css（过去到这里相当大）。

我用于此的 javascript 也相当简单：

<script type="text/javascript">
$(document).ready(function(){
    myLayout = $("#content").layout({
        applyDefaultStyles: true
    });
    myLayout.sizePane('west',500);
});
</script>

但是输出是所有三个面板都很短，如下面的屏幕截图所示。如何修复布局的高度以适应整个页面并一直到页脚？ 在此处输入图像描述

4

1 回答 1

1

布局管理器将使用容器的大小来确定其布局逻辑。在这种情况下，您没有为内容 div 指定任何高度<div id="content">...</div>。就像一个简单的例子一样改变你的CSS：

#content {
    float: left;
    clear: both;
    width: 100%;
    height: 500px;
    padding: 10px 0 20px;
}

如果你想让内容fill在页眉和页脚之间有空间，你应该使用两种布局，一种用于北（页眉）、中心（内容）、南（页脚），然后在你的内容中再次为你的西、中心应用第二种布局，东面板。

于 2012-04-08T13:08:59.830 回答