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: http://jsfiddle.net/MhEEH/3/

You'll see that the green panel content of #tab-1 just covers the whole page, instead of just the panel space, when I use the following CSS:

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

I could use "top: 27px;" to fix that, but this would collide with two things:

1. If I change the tabs "theme", the height (27px) could possibly change
2. If I have a lot of tabs, I'll have a second row below the first row. So my panel content would then cover this second row...

A clean & short solution would be fine.

JavaScript is acceptable, while a (clean!) CSS-only solution would be preferable...

-- Regards,

Stefan

Answer 1

Instead of using your own CSS, use jQuery UI's built-in feature.

var tabs = $("#tabs").tabs({heightStyle: "fill"});

From the API documentation:

heightStyle

Type: String

Default: "content"

Controls the height of the tabs widget and each panel. Possible values:

• "auto": All panels will be set to the height of the tallest panel.
• "fill": Expand to the available height based on the tabs' parent height.
• "content": Each panel will be only as tall as its content.

Although you are right that a plain CSS solution would be very nice, since you are using JavaScript anyway to build the tab functionality, it will be best to use the existing capabilities of the script you already have.

---

UPDATE:

• See http://jsfiddle.net/MhEEH/45/ for the simplest full example. Note that it does not need any CSS position rules.

• You need to use http://benalman.com/projects/jquery-resize-plugin/ (or similar) to watch the parent for size changes. Browsers only fire the resize event on the window itself by default, but this plugin extends support for that event to arbitrary elements being resized.