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 don't see a need in using javascript here for basic style modifications. I've recently converted a single page full screen style app from doing all it's re sizing from javascript to pure CSS using positioning and stuff.

Now onto a solution - try this.

http://jsfiddle.net/MhEEH/16/

#tab-1 {
    background: green;
    height: 100%;
}

I don't see a need in using absolute positioning on the green box element because the parent fills up the space, all you need to now do is height: 100% and it should fill up the rest of the space.

Edit

There seems to be an issue with the content not scrolling in this version. Struggling to find a fix for this. I feel like the jQuery UI is adding a bunch of styles and stuff to the #tab-1 div which might be causing your problem. Could be worth trying to reset the styles for #tab-1 and seeing what that leaves you with.