Cannot scroll down to the end inside a tab panel in center layout

Question

I am struggling with the following problem, any hint would be appreciated.

In my jQuery UI layout in the center panel I put a jQuery UI tab, within this tab I put some contents. Contents is taking more space than available, I would like to have a scroll bar only on the containing div , not on the whole tab nor on the center panel. Indeed I would like to have tab headers always visible.

What I did:

• setting center__contentSelector for the jQuery UI layout centre panel to the tab widget (so I have my header and footer displayed ok)
• setting overflow: hidden both on the layout centre panel and the tab widget
• setting overflow: auto on the div of the contents
• giving heights to both the tab widget and the contents' div

The final result looks fine, however the scroll bar can't display the last items , whatever I tried. It's impossible to scroll to the limit.

Here is a fiddle that shows what it looks like: http://jsfiddle.net/mguijarr/288yaz15/

Any ideas ?

Answer 1

your div's height seems to have extra 80 pixels each time, because of the tab title part. simply subtract those 80 pixels from 100%:

#tab_1 {
    height: calc(100% - 80px);
    background: #00ffff;
    overflow: auto;
}

Fixed Fiddle