jQuery tabs: panel covers tabs at 100% height

Question

I\'m trying to use the tabs widgets of jQuery-UI having panels content to extend to the whole available space.

Here\'s a simplified version of what I\'ve got so far:

Answer 1

I tried putting the tabs into a tab container and with the following styles

#tab-container {position:relative; min-height:100%;}

and it seemed to work:

http://jsfiddle.net/MhEEH/8/

Answer 2

OP,

Check this Fiddle.

The parent #tabs has overflow: hidden;. In addition to the children: #tabs div[id*=tab] having overflow:auto set. This ensures that the parent will set the bounds, and in the event that there is overflowing content in the tab, the scrollbar appearance will be delegated by the tab itself.

Also, just for those unfamiliar with the syntax #tabs div[id*=tab], this wildcard will match any child div of #tabs whose id contains "tab". This can be accomplished a number of ways, but I chose this route for quick-prototyping.

Hope this helps.

Answer 3

How about this... With this you will see the scrollbar completely visible if the content overflows

http://jsfiddle.net/uHk5f/

<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until  the bottom of the page. But it shall -NOT- cover the tabs!</div>

and provide style for the class, with this

    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
     overflow:auto;
}

 #tabs .customPanel {
    background: green;

}

Hope this helps!!!

Answer 4

I added a top position value to the #tab-1 id to push it below the tab itself.

See: http://jsfiddle.net/MhEEH/40/

Here is the pertinent CSS:

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

Hope it helps!