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

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