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

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

I just tried to use this:

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

and in jsfiddle it works fine. not sure how it will be on your page http://jsfiddle.net/MhEEH/7/

Answer 3

The simplest Solution, two changes in CSS, and problem solved, #tabs{height:100%;}

and #tab-1{top:45px;}

this will do :) updated fiddle

Answer 4

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.

Answer 5

Below is a link to my CSS solution hopefully that works for you

http://jsfiddle.net/MhEEH/17/

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

Someone has mentioned the Coda slider which is a great solution as well and as an alternative I might suggest this elastic content slider from codrops

http://tympanus.net/codrops/2013/02/26/elastic-content-slider/

Hope it helps,

Cheers

Answer 6

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!