jquery ui layout height is too short

I am trying to put a layout together with jquery-ui-layout and can't overcome the height problem.

Here's the HTML code:

<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>

There is styles.css I use for all the pages (it's rather large to past into here).

The javascript I use for this is rather simple, too:

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

But the output is that all three panels are so short as per the screenshot below. How can I fix the height of the layout to fit the whole page and go all the way down to the footer?

Answers


The layout manager will use the size of the container to determine it's layout logic. In this case you have not specified any height for the content div <div id="content">...</div>. Just as a quick example change your css like so:

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

If you want to have the content fill the space between your header and footer you should use two layouts one for north (header), centre (content), south (footer) and again in your content you apply a second layout for your west, centre, east panels.


Need Your Help

using "use strict" and variable scope

javascript scope strict

I've started using "use strict" for my scripts recently. One of the behaviors I noticed is that this.[name of variable] doesn't work for an object. For example:

COMET (server push to client) on iPhone

iphone objective-c cocoa-touch http comet

I'm looking to establish some kind of socket/COMET type functionality from my server(s) to my iPhone application. Essentially, anytime a user manages to set an arbitrary object 'dirty' on the serve...