Home/ Questions/Q 7765455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T15:10:14+00:00

I am trying to put a layout together with jquery-ui-layout and can’t overcome the

  • 0

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?
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0