Question

我正在尝试将布局与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>

但是输出结果是所有三个面板都如下所示。如何修复布局的高度以适应整个页面并一直向下到页脚？ enter image description here

Answer 1

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

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

如果您希望内容fill在页眉和页脚之间留出空间，则应使用两个布局，一个用于北（页眉），中心（内容），南（页脚），再次在您应用的内容中西，中，东区的第二个布局。

jquery ui布局高度太短

1 个答案: