jQuery tabs: panel covers tabs at 100% height

问题:

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

回答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.

回答2:

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/

回答3:

Is this what you're after?

http://jsfiddle.net/MhEEH/5/

html, body {
    height: 100%;   
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1 {
    background: green;
    height: 100%;
}

回答4:

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/

回答5:

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.

回答6:

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

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

this will do :) updated fiddle

回答7:

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

回答8:

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!!!

回答9:

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.

回答10:

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!