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

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

i struggling next problem, hint appreciated.

in jquery ui layout in center panel set jquery ui tab, within tab set contents. contents taking more space available, have scroll bar on containing div, not on whole tab nor on center panel. indeed have tab headers visible.

what did:

setting center__contentselector jquery ui layout centre panel tab widget (so have header , footer displayed ok) setting overflow: hidden both on layout centre panel , tab widget setting overflow: auto on div of contents giving heights both tab widget , contents' div

the final result looks fine, the scroll bar can't display lastly items, whatever tried. it's impossible scroll limit.

here fiddle shows looks like: http://jsfiddle.net/mguijarr/288yaz15/

any ideas ?

your div's height seems have 80 pixels each time, because of tab title part. subtract 80 pixels 100%:

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

fixed fiddle

css jquery-ui jquery-layout