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>

しかし、出力は、以下のスクリーンショットのように、3 つのパネルすべてが非常に短いということです。レイアウトの高さをページ全体に合わせてフッターまで固定するにはどうすればよいですか? ここに画像の説明を入力

4

1 に答える 1

1

レイアウトマネージャーは、コンテナーのサイズを使用して、コンテナーのレイアウトロジックを決定します。この場合、コンテンツdivの高さは指定していません<div id="content">...</div>。簡単な例のように、CSSを次のように変更します。

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

コンテンツをヘッダーとフッターの間のスペースにしたい場合はfill、北（ヘッダー）、中央（コンテンツ）、南（フッター）の2つのレイアウトを使用する必要があります。また、コンテンツでは、西の中央に2番目のレイアウトを適用します。 、東パネル。

于 2012-04-08T13:08:59.830 に答える