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

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.