Trouble with jQuery UI layout and jQuery UI tabs

Question

I am trying to create a layout structured like this:

• north pane
• center pane
  • a header div
  • a notebook-like tab panel
    • with at least one tab
  • a footer div

header div and footer div has to be always visible, the tab should take all remaining space and should have a vertical scroll bar if needed.

Here is what I did: https://jsfiddle.net/mguijarr/y57v3nkf/

I set overflow:hidden on the center pane, I tried to set height: 100% on tab panel for it to grow as much as it can, but it's eating the space below (ie. the footer div is not shown).

What can I do to fix the layout ?

Answer 1

The footer is there. The problem is just that you can't set the div#tabs with height: 100%, because the outer div has overflow:hidden

It will have the same height as its container, but as the footer is at the same level as the div#tabs, it will be hidden, because the div.ui-layout-center has the overflow:hidden.

First solution: change the height of div#tabs to a lower percentage:

   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;"></div>
   <div id="tabs" style="height: 40%; overflow: auto">
        content
   </div>
   <div style="background: #ff0000; height: 100px; ">footer</div>

https://jsfiddle.net/y57v3nkf/1/

Second solution, change the overflow option of the outer div to automatic: https://jsfiddle.net/y57v3nkf/2/

Third Solution (Jquery Brute force): Set the outer div to 100% height, and:

$(document).ready(function(){
   var outerDivHeight = $('div.ui-layout-center').height();
   var tabDivHeight = outerDivHeight - 100 - 100 -10;

   $('#tabs').height(tabDivHeight);
});

https://jsfiddle.net/y57v3nkf/3/

Porblems with this solution:

• You have to do calculations.
• It gets the correct height when page loads, but then it doesn't if the page is resized.

TIP: Go percentual: These layouts get really tricky when you have fixed size divs along with percentual divs. To go fully responsive, you'll have to redo all the layout thinking in percentages, example:

|-------------100%-----------------|
|---20%----|------------80%--------|
|....|.....|.....|.................|

Answer 2

Answering my own question: in fact, the contentSelector option of jQuery layout did the trick.

See updated fiddle: http://jsfiddle.net/mguijarr/288yaz15/1/